export function Marquee({
  items,
  tone = "paper",
}: {
  items: string[];
  tone?: "paper" | "dark" | "violet" | "yellow";
}) {
  const bg =
    tone === "dark"
      ? "bg-neutral-900 text-white"
      : tone === "violet"
        ? "bg-violet-700 text-white"
        : tone === "yellow"
          ? "bg-yellow-300 text-neutral-900"
          : "bg-white text-neutral-900";
  const dot = tone === "paper" ? "text-violet-700" : "text-yellow-300";
  const row = items.flatMap((it, i) => [
    <span key={`${i}-t`} className="px-6">{it}</span>,
    <span key={`${i}-d`} className={dot}>●</span>,
  ]);
  return (
    <div
      className={`overflow-hidden border-b-2 border-neutral-900 ${bg}`}
      aria-hidden
    >
      <div className="marquee-track flex items-center whitespace-nowrap py-4 text-2xl font-black uppercase tracking-tight md:text-3xl">
        <div className="flex items-center">{row}</div>
        <div className="flex items-center">{row}</div>
      </div>
    </div>
  );
}
