---
import MardownContent from '../components/MardownContent.astro';
import { getStrapiMedia, getStrapiBaseUrl } from '../lib/strapi';

interface Props {
  entry: {
    data: {
      name: string;
      description: string;
      mainImage: {
        url: string;
        alternativeText: string;
      };
    };
  };
}

const { entry } = Astro.props;
const BASE_URL = getStrapiBaseUrl();
---
<div class="element-view">
  <div class="element-content">
    <div class="element-text">
      <h1>{entry.data.name}</h1>
      <MardownContent content={entry.data.description} />
    </div>
    
    {entry.data.mainImage && (
      <div class="element-image">
        <img
          src={getStrapiMedia(entry.data.mainImage.url, BASE_URL)}
          alt={entry.data.mainImage.alternativeText}
          class="main-image"
        />
      </div>
    )}
  </div>
</div>

<style>
  .element-view {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  .element-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .element-text {
    order: 2;
  }
  
  .element-image {
    order: 1;
  }
  
  .element-view h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
    line-height: 1.2;
  }
  
  .main-image {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  /* Desktop styles */
  @media (min-width: 768px) {
    .element-content {
      flex-direction: row;
      align-items: flex-start;
      gap: 3rem;
    }
    
    .element-text {
      order: 1;
      flex: 1;
    }
    
    .element-image {
      order: 2;
      flex-shrink: 0;
      width: 300px;
    }
    
    .main-image {
      width: 300px;
      height: auto;
    }
  }
</style>