import Image from "next/image";

export function LogoCloud({
  logos,
  title = "Birlikte çalıştığımız markalar",
}: {
  logos: string[];
  title?: string;
}) {
  if (logos.length === 0) return null;

  return (
    <section className="border-b border-[var(--border)] bg-[var(--navy-50)]/30 py-12">
      <div className="mx-auto max-w-7xl px-6">
        <p className="text-center text-xs font-semibold uppercase tracking-[0.18em] text-[var(--muted)]">
          {title}
        </p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
          {logos.map((src, i) => (
            <div
              key={src + i}
              className="relative h-10 w-32 opacity-60 grayscale transition hover:opacity-100 hover:grayscale-0 sm:h-12 sm:w-40"
            >
              <Image
                src={src}
                alt={`Müşteri logosu ${i + 1}`}
                fill
                sizes="160px"
                className="object-contain"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}