'use client';

import React, {useEffect, useState} from 'react';

import {getImg} from '@/services/annuaireService';

/**
 * Photo d'une entrée d'annuaire, avec repli sur le motif rayé
 * du design quand l'entrée n'a pas de média.
 */
export default function AnnuaireCardImage({aenId, alt}: {aenId: number; alt: string}) {
  const [url, setUrl] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    getImg(String(aenId))
      .then((imgUrl) => {
        if (!cancelled) setUrl(imgUrl || null);
      })
      .catch(() => {
        if (!cancelled) setUrl(null);
      });
    return () => {
      cancelled = true;
    };
  }, [aenId]);

  if (!url) {
    return <span className="tk-annuaire-card__placeholder" aria-hidden="true" />;
  }

  return (
    <img
      src={url}
      alt={alt}
      loading="lazy"
      className="tk-annuaire-card__img"
      onError={() => setUrl(null)}
    />
  );
}