---
import { getPublishedSeries, fileUrl } from '../lib/directus';

export interface Props {
  tag?: string;
  italicTitle?: string;
  endTitle?: string;
}
const {
  tag = '[03] REALISATIONS.',
  italicTitle = 'quatre',
  endTitle = 'TERRAINS / UNE METHODE.',
} = Astro.props;

const series = await getPublishedSeries();

const categoryLabel: Record<string, string> = {
  'mariage': 'MARIAGE',
  'portrait-lifestyle': 'PORTRAIT / LIFESTYLE',
  'reportage-editorial': 'REPORTAGE / EDITORIAL',
  'evenementiel': 'EVENEMENTIEL',
};
---
<section class="series" id="realisations">
  <header class="section-head">
    <p class="tag">{tag}</p>
    <h2><span class="ital">{italicTitle}</span> {endTitle}</h2>
  </header>

  {series.length === 0 ? (
    <article class="serie">
      <div class="serie__num">--</div>
      <figure aria-label="Aucune serie publiee pour l'instant">
        <div style="aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; font-family: var(--mono); color: var(--ink-2); font-size: 0.75rem; letter-spacing: 0.12em; text-align: center; padding: 1rem; line-height: 1.7;">
          AUCUNE SERIE PUBLIEE.<br />
          AJOUTE UN ITEM DANS LA COLLECTION 'SERIES' VIA DIRECTUS.<br />
          ( HTTP://LOCALHOST:8055 )
        </div>
      </figure>
      <dl class="serie__data">
        <dt>STATUS</dt><dd>EMPTY_COLLECTION</dd>
        <dt>SOURCE</dt><dd>DIRECTUS</dd>
      </dl>
    </article>
  ) : (
    series.map((serie) => (
      <article class="serie">
        <div class="serie__num">{String(serie.index ?? 0).padStart(2, '0')}</div>
        <a class="serie__link" href={`/realisations/${serie.id}`} aria-label={`Voir la serie ${serie.title}`}>
          <figure>
            {serie.cover ? (
              <img
                src={fileUrl(serie.cover, { width: 1600, quality: 80, fit: 'cover' })}
                srcset={`${fileUrl(serie.cover, { width: 800, quality: 80, fit: 'cover' })} 800w, ${fileUrl(serie.cover, { width: 1200, quality: 80, fit: 'cover' })} 1200w, ${fileUrl(serie.cover, { width: 1600, quality: 80, fit: 'cover' })} 1600w`}
                sizes="(min-width: 900px) 60vw, 100vw"
                alt={serie.cover_alt}
                width="1600"
                height="1000"
                loading="lazy"
              />
            ) : (
              <div style="aspect-ratio: 16/10; background: var(--paper-elev); display: flex; align-items: center; justify-content: center; font-family: var(--mono); color: var(--ink-2); font-size: 0.75rem; letter-spacing: 0.12em;">
                PAS DE COVER /
              </div>
            )}
          </figure>
        </a>
        <dl class="serie__data">
          <dt>CATEGORIE</dt><dd>{categoryLabel[serie.category] ?? serie.category}</dd>
          <dt>TITRE</dt><dd><a href={`/realisations/${serie.id}`}>{serie.title.toUpperCase()}</a></dd>
          <dt>LIEU</dt><dd>{serie.lieu.toUpperCase()}</dd>
          <dt>DATE</dt><dd>{serie.date_shoot}</dd>
          {serie.couple && <><dt>COUPLE</dt><dd>{serie.couple.toUpperCase()}</dd></>}
          {serie.client && <><dt>CLIENT</dt><dd>{serie.client.toUpperCase()}</dd></>}
          {typeof serie.invites === 'number' && <><dt>INVITES</dt><dd>{serie.invites}</dd></>}
          {serie.duree && <><dt>DUREE</dt><dd>{serie.duree.toUpperCase()}</dd></>}
          {serie.gallery.length > 0 && <><dt>PHOTOS</dt><dd>{String(serie.gallery.length).padStart(2, '0')}</dd></>}
        </dl>
      </article>
    ))
  )}
</section>
