import Image from "next/image";

type Brand = {
  id: string;
  name: string;
  slug: string;
  logoUrl: string | null;
};

const logoFiles: Record<string, string> = {
  // dell: "/Dell-logo.png",
  dell: "/Dell-Logo.png", 
  hp: "/hp.jpg",
  lenovo: "/lenovo.png",
  samsung: "/samsung.avif",
  "tp-link": "/tp-link.jpg",
   apple: "/Apple-Logo.png", 
  //apple: "/Apple-logo.png",
  epson: "/epson.jpg",
  "dell-logo": "/Dell-Logo.png",
};

function BrandTile({ brand }: { brand: Brand }) {
  const logoPath = logoFiles[brand.slug];
  return (
    <div className="shrink-0 w-40 h-20 mx-2 flex items-center justify-center">
      {logoPath ? (
        <div className="relative w-full h-full p-2">
          <Image src={logoPath} alt={brand.name} fill className="object-contain" />
        </div>
      ) : (
        <span className="font-display font-semibold text-ink/50 text-base tracking-tight">
          {brand.name}
        </span>
      )}
    </div>
  );
}

export default function BrandStrip({ brands }: { brands: Brand[] }) {
  return (
    <section className="py-14">
      <div className="max-w-7xl mx-auto px-4">
        <p className="font-display font-bold text-sm uppercase tracking-wide text-ink mb-6">
          Featured Brands
        </p>
        <div className="overflow-hidden marquee-pause-on-hover">
          <div className="flex w-max animate-marquee-slow">
            {[...brands, ...brands].map((brand, i) => (
              <BrandTile key={`${brand.id}-${i}`} brand={brand} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}