Marquee Logos

"use client";

type State = "single" | "reverse" | "double";

const LOGOS = ["Apple", "Linear", "Vercel", "Notion", "Figma", "Stripe", "GitHub", "Cloudflare"];

function Row({ reverse = false, duration = 20 }: { reverse?: boolean; duration?: number }) {
return (
  <div className="relative overflow-hidden">
    <div
      className="flex gap-10 whitespace-nowrap py-3"
      style={{
        animation: `marquee ${duration}s linear infinite ${reverse ? "reverse" : ""}`,
      }}
    >
      {[...LOGOS, ...LOGOS].map((l, i) => (
        <span
          key={i}
          className="font-mono text-base tracking-tight text-muted-foreground/70"
        >
          ◆ {l}
        </span>
      ))}
    </div>
  </div>
);
}

export function Marquee({ state = "single" }: { state?: State }) {
return (
  <div className="relative w-full overflow-hidden rounded-xl border border-border bg-background/30">
    <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-12 bg-gradient-to-r from-background to-transparent" />
    <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-12 bg-gradient-to-l from-background to-transparent" />
    <Row duration={state === "reverse" ? 25 : 20} reverse={state === "reverse"} />
    {state === "double" && <Row duration={30} reverse />}
    <style jsx>{`
      @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
    `}</style>
  </div>
);
}