import Image from "next/image";
import { founders, type Locale } from "@/content/site";
import { founderContent } from "@/content/pageContent";

export function FounderGrid({ locale, compact = false }: { locale: Locale; compact?: boolean }) {
  return (
    <div className={compact ? "founder-grid compact" : "founder-grid"}>
      {founders.map((founder) => (
        <article className="founder-card" key={founder.name} data-reveal>
          <div className="founder-image">
            <Image
              src={founder.image}
              alt={
                locale === "fr"
                  ? `Portrait de ${founder.name}`
                  : locale === "ar"
                    ? `صورة ${founder.name}`
                    : `Portrait of ${founder.name}`
              }
              width={1200}
              height={1500}
              sizes="(max-width: 720px) 100vw, 33vw"
            />
          </div>
          <div>
            <h3>{founder.name}</h3>
            <p>{founderContent[locale][founder.name].role}</p>
            {founderContent[locale][founder.name].credential && (
              <span>{founderContent[locale][founder.name].credential}</span>
            )}
          </div>
        </article>
      ))}
    </div>
  );
}