import Image from "next/image";
import {
  Box,
  Command,
  Gem,
  Hexagon,
  Layers,
  Zap,
} from "lucide-react";
import type { Client } from "@/lib/contentTypes";

const icons = [Zap, Hexagon, Layers, Command, Gem, Box];

/** Baris logo klien bergeser tanpa henti (marquee) — seperti template asli. */
export default function LogoMarquee({ clients }: { clients: Client[] }) {
  const row = [...clients, ...clients]; // duplikat untuk loop mulus

  return (
    <section className="border-y border-line py-12">
      <p className="mb-8 text-center font-accent text-[11px] tracking-[0.22em] text-mist uppercase">
        Dipercaya oleh instansi pemerintah, BUMN, dan swasta
      </p>
      <div className="marquee-mask overflow-hidden">
        <div className="animate-marquee flex w-max items-center gap-16 pr-16">
          {row.map((client, i) => {
            const Icon = icons[i % icons.length];
            return (
              <div
                key={`${client.name}-${i}`}
                className="group flex items-center gap-2.5 text-mist transition-colors hover:text-fg"
              >
                {client.logo ? (
                  <span className="logo-sep shrink-0">
                    <Image
                      src={client.logo}
                      alt={client.name}
                      width={64}
                      height={64}
                      className="h-8 w-auto object-contain grayscale transition-[filter] duration-500 group-hover:grayscale-0"
                    />
                  </span>
                ) : (
                  <Icon size={18} strokeWidth={1.5} />
                )}
                <span className="font-accent text-lg font-medium whitespace-nowrap">
                  {client.name}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}