import Image from "next/image";
import { cn } from "@/lib/cn";
import { marqueeLogos, type MarqueeSize } from "@/data/home";

/** Refined heights per logo category to ensure crisp rendering on all screens */
const logoSize: Record<MarqueeSize, string> = {
  default: "h-[28px] sm:h-[34px] md:h-[40px] max-h-[42px]",
  sm: "h-[30px] sm:h-[36px] md:h-[42px] max-h-[44px]",
  md: "h-[32px] sm:h-[38px] md:h-[46px] max-h-[48px]",
  lg: "h-[34px] sm:h-[40px] md:h-[50px] max-h-[52px]",
  xl: "h-[32px] sm:h-[38px] md:h-[46px] max-h-[48px]",
};

function LogoGroup({ decorative }: { decorative?: boolean }) {
  return (
    <div
      aria-hidden={decorative}
      className="flex shrink-0 items-center"
    >
      {marqueeLogos.map((logo) => (
        <div
          key={logo.src}
          className="flex shrink-0 items-center mx-[clamp(14px,2.5vw,35px)]"
        >
          <Image
            src={logo.src}
            alt={decorative ? "" : logo.alt}
            width={logo.width}
            height={logo.height}
            unoptimized
            priority
            className={cn(
              "block w-auto shrink-0 object-contain transition-[filter,opacity] duration-300",
              logoSize[logo.size],
            )}
          />
        </div>
      ))}
    </div> 
  );
}

/** Infinite horizontal partner strip (content is duplicated for a seamless loop). */
export function PartnerMarquee() {
  return (
    <div
      role="region"
      aria-label="Partners and Press Marquee"
      className="group absolute right-0 bottom-0 left-0 z-20 flex h-[58px] items-center overflow-hidden bg-white ml-[60px] max-[1201px]:ml-[35px] max-[769px]:ml-0 compact:h-12!"
    >
      <div className="flex w-max shrink-0 animate-marquee group-hover:[animation-play-state:paused]">
        <LogoGroup />
        <LogoGroup />
      </div>
    </div>
  );
}