import Image from "next/image";

type TrustedLogo = {
  node?: {
    sourceUrl?: string;
    altText?: string;
  };
};

type TrustedLogos = {
  logo1?: TrustedLogo | null;
  logo2?: TrustedLogo | null;
  logo3?: TrustedLogo | null;
  logo4?: TrustedLogo | null;
  logo5?: TrustedLogo | null;
  logo6?: TrustedLogo | null;
  logo7?: TrustedLogo | null;
  logo8?: TrustedLogo | null;
};

type TrustedByProps = {
  data: {
    trustedSubtitle?: string;
    trustedTitle?: string;
    trustedLogos?: TrustedLogos;
  };
};

export default function TrustedBy({ data }: TrustedByProps) {
  const logos = Object.values(data.trustedLogos || {}).filter(
    (logo): logo is TrustedLogo =>
      Boolean(logo?.node?.sourceUrl)
  );

  if (!logos.length) return null;

  return (
    <section className="py-16 bg-[#F3F3F3]">
      <div className="container mx-auto px-4 text-center">

        {/* SUBTITLE */}
        {data.trustedSubtitle && (
          <span className="block text-base tracking-widest text-[#202020]/60 mb-3">
            {data.trustedSubtitle}
          </span>
        )}

        {/* TITLE */}
        {data.trustedTitle && (
          <h2 className="max-w-5xl mx-auto font-mono font-medium text-2xl sm:text-[32px] lg:text-[32px] text-[#202020] mb-6">
            {data.trustedTitle}
          </h2>
        )}

        {/* LOGOS GRID */}
        <div
          className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-6 justify-center items-center max-w-4xl mx-auto"
        >
          {logos.map((logo, i) => (
            <div
              key={i}
              className="flex items-center justify-center bg-white border border-[#202020]/15 rounded-lg h-[105px] transition"
            >
              <Image
                src={logo.node!.sourceUrl!}
                alt={logo.node!.altText || "Client logo"}
                width={120}
                height={60}
                className="h-full w-full object-contain grayscale hover:grayscale-0 transition cursor-pointer"
                unoptimized
              />
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}