import { Icon, type IconName } from "@/lib/icons";
import { cn } from "@/lib/utils";

type MarqueeItem = { name: string; icon: IconName };

function Tile({ name, icon }: MarqueeItem) {
  return (
    <li className="inline-flex shrink-0 items-center gap-2.5 rounded-xl border border-border bg-card px-4 py-2.5 shadow-sm">
      <Icon name={icon} className="size-4.5 text-foreground/70" />
      <span className="text-sm font-medium whitespace-nowrap text-foreground">
        {name}
      </span>
    </li>
  );
}

/**
 * LogoMarquee (§6.3): honest integrations strip. Pure-CSS infinite scroll —
 * pauses on hover, becomes static under prefers-reduced-motion (§5.6 #6).
 * The track is duplicated (second copy aria-hidden) for a seamless loop.
 */
export function LogoMarquee({
  items,
  className,
}: {
  items: MarqueeItem[];
  className?: string;
}) {
  return (
    <div
      className={cn(
        "group relative overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]",
        className,
      )}
    >
      <div className="flex w-max animate-marquee group-hover:[animation-play-state:paused] motion-reduce:animate-none">
        <ul className="flex items-center gap-3 pr-3">
          {items.map((it) => (
            <Tile key={it.name} {...it} />
          ))}
        </ul>
        <ul className="flex items-center gap-3 pr-3" aria-hidden>
          {items.map((it) => (
            <Tile key={`dup-${it.name}`} {...it} />
          ))}
        </ul>
      </div>
    </div>
  );
}