import Image from "next/image";

interface Logo {
  src: string;
  alt: string;
  width: number;
  height: number;
}

const CLINIC_LOGOS: Logo[] = [
  {
    src: "/images/logos/clinic1.svg",
    alt: "Laser Collective",
    width: 150,
    height: 40,
  },
  {
    src: "/images/logos/clinic2.svg",
    alt: "Smile Bright",
    width: 140,
    height: 40,
  },
  { src: "/images/logos/clinic3.svg", alt: "CarePlus", width: 120, height: 40 },
  { src: "/images/logos/clinic4.svg", alt: "GlowMed", width: 130, height: 40 },
  {
    src: "/images/logos/clinic5.svg",
    alt: "VitalCare",
    width: 140,
    height: 40,
  },
  {
    src: "/images/logos/clinic6.svg",
    alt: "Aesthetic Hub",
    width: 150,
    height: 40,
  },
  { src: "/images/logos/clinic7.svg", alt: "Radiance", width: 135, height: 40 },
  // Duplicate for seamless loop
  {
    src: "/images/logos/clinic1.svg",
    alt: "Laser Collective",
    width: 150,
    height: 40,
  },
  {
    src: "/images/logos/clinic2.svg",
    alt: "Smile Bright",
    width: 140,
    height: 40,
  },
  { src: "/images/logos/clinic3.svg", alt: "CarePlus", width: 120, height: 40 },
  { src: "/images/logos/clinic4.svg", alt: "GlowMed", width: 130, height: 40 },
  {
    src: "/images/logos/clinic5.svg",
    alt: "VitalCare",
    width: 140,
    height: 40,
  },
  {
    src: "/images/logos/clinic6.svg",
    alt: "Aesthetic Hub",
    width: 150,
    height: 40,
  },
  { src: "/images/logos/clinic7.svg", alt: "Radiance", width: 135, height: 40 },
];

export default function LogoScroller() {
  return (
    <div className="mt-8 w-full overflow-hidden">
      <div className="relative">
        {/* Gradient masks for fade effect */}
        <div className="absolute left-0 top-0 z-10 h-full w-32 bg-gradient-to-r from-white via-white/80 to-transparent dark:from-slate-900 dark:via-slate-900/80" />
        <div className="absolute right-0 top-0 z-10 h-full w-32 bg-gradient-to-l from-white via-white/80 to-transparent dark:from-slate-900 dark:via-slate-900/80" />

        {/* Scrolling container */}
        <div className="flex gap-12 py-4">
          <div className="flex animate-scroll gap-12">
            {CLINIC_LOGOS.map((logo, index) => (
              <div
                key={`${logo.src}-${index}`}
                className="flex h-12 shrink-0 items-center justify-center transition-all"
              >
                <Image
                  src={logo.src}
                  alt={logo.alt}
                  width={logo.width}
                  height={logo.height}
                  className="h-auto max-h-10 w-auto object-contain transition-all hover:scale-105"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}