export default function Marquee({ items }: { items: string[] }) {
  const row = (hidden: boolean) => (
    <div className="flex shrink-0 items-center gap-16 pr-16" aria-hidden={hidden || undefined}>
      {items.map((t, i) => (
        <span key={i} className="flex items-center gap-16">
          <span className="font-display font-black uppercase text-4xl md:text-6xl text-[#14151A]/[0.055] tracking-tight whitespace-nowrap">
            {t}
          </span>
          <span className="h-2.5 w-2.5 rotate-45 bg-ember/50" />
        </span>
      ))}
    </div>
  );
  return (
    <div className="overflow-hidden border-y border-[#E2E7EF] py-8 bg-[#F6F8FA]" data-testid="editorial-marquee">
      <div className="marquee-track flex w-max">
        {row(false)}
        {row(true)}
      </div>
    </div>
  );
}