'use client';

import React, {useState} from 'react';
import {Image} from 'react-bootstrap';

/**
 * Photo du groupe dans le hero, avec repli sur le motif rayé sombre
 * du design quand l'image est absente ou cassée.
 */
export default function GroupeHeroImage({src, alt}: {src?: string | null; alt: string}) {
  const [failed, setFailed] = useState(false);

  if (!src || failed) {
    return <span className="tk-groupe-image-placeholder" aria-hidden="true" />;
  }

  return <Image src={src} alt={alt} fluid onError={() => setFailed(true)} />;
}