---
/**
 * Placeholder visuel pour les images en attente du client.
 * À remplacer par <Image> d'astro:assets une fois les photos fournies dans src/assets/images/.
 *
 * Note SEO : on garde l'alt descriptif (rédigé en français, naturel, sans bourrage) pour que
 * la structure HTML soit déjà conforme — il suffira de swap le composant.
 */
export interface Props {
  alt: string;
  aspect?: string; // ex: '4/5', '16/9', '3/4', 'square'
  class?: string;
  /** Description courte affichée en surimpression (pour identifier le visuel manquant). */
  label?: string;
  loading?: 'lazy' | 'eager';
  rounded?: boolean;
}

const {
  alt,
  aspect = '4/5',
  class: className = '',
  label,
  loading = 'lazy',
  rounded = false,
} = Astro.props;

const aspectClass =
  aspect === 'square'
    ? 'aspect-square'
    : aspect === '4/5'
      ? 'aspect-[4/5]'
      : aspect === '16/9'
        ? 'aspect-[16/9]'
        : aspect === '3/4'
          ? 'aspect-[3/4]'
          : `aspect-[${aspect}]`;
---

<div
  class:list={[
    'relative overflow-hidden bg-tertiary-fixed/50',
    aspectClass,
    rounded && 'rounded-sm',
    className,
  ]}
  role="img"
  aria-label={alt}
  data-loading={loading}
>
  <div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
    <svg class="w-8 h-8 text-primary/40 mb-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
      <circle cx="12" cy="8" r="2.5" />
      <path d="M12 5.5C11 3 8 3 7 5s.5 4 3 4M12 5.5C13 3 16 3 17 5s-.5 4-3 4M9.5 9.5C7 10.5 6 13 7.5 14.5s4 1 5-1.5M14.5 9.5C17 10.5 18 13 16.5 14.5s-4 1-5-1.5M12 13v9" />
    </svg>
    {label && (
      <p class="font-body text-caption uppercase tracking-widest text-primary/60">{label}</p>
    )}
  </div>
  <div class="absolute inset-0 bg-gradient-to-br from-tertiary-fixed/30 to-primary-fixed/20 pointer-events-none"></div>
</div>