Logo Marquee

import { Component as Marquee } from "@/components/ui/logo-marquee";
import {
  Hexagon,
  Triangle,
  Circle,
  Sparkles,
  Star,
  Zap,
  Flame,
  Gem,
  Shield,
  Layers,
  Aperture,
  Box,
} from "lucide-react";

function Logo({ icon: Icon, name }: { icon: React.ElementType; name: string }) {
  return (
    <div className="flex items-center gap-2.5 px-4 opacity-50 hover:opacity-100 transition-opacity duration-300">
      <Icon className="size-6 text-foreground" strokeWidth={1.5} />
      <span className="text-base font-semibold tracking-tight text-foreground whitespace-nowrap">
        {name}
      </span>
    </div>
  );
}

const logosRow1 = [
  { icon: Hexagon, name: "Hexacore" },
  { icon: Zap, name: "Voltshift" },
  { icon: Sparkles, name: "Prismify" },
  { icon: Flame, name: "Ignite Labs" },
  { icon: Shield, name: "Aegis AI" },
  { icon: Layers, name: "Nucleon" },
];

const logosRow2 = [
  { icon: Triangle, name: "Deltaworks" },
  { icon: Star, name: "Novacloud" },
  { icon: Aperture, name: "Lensflow" },
  { icon: Circle, name: "Orbiter" },
  { icon: Gem, name: "Crystallize" },
  { icon: Box, name: "Pentaform" },
];

export default function Demo() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background py-20">
      <div className="w-full max-w-4xl">
        <div className="text-center mb-16">
          <h2 className="text-2xl font-bold tracking-tight text-foreground mb-2">
            Logo Marquee
          </h2>
          <p className="text-sm text-muted-foreground max-w-md mx-auto">
            Infinite scrolling strip with faded edges, pause on hover, and configurable speed and direction. Pass any children.
          </p>
        </div>

        <p className="text-center text-xs font-medium tracking-widest uppercase text-muted-foreground mb-8">
          Trusted by teams at
        </p>

        <div className="space-y-6">
          <Marquee speed={25} direction="left" gap={48} className="py-2">
            {logosRow1.map((logo) => (
              <Logo key={logo.name} icon={logo.icon} name={logo.name} />
            ))}
          </Marquee>

          <Marquee speed={20} direction="right" gap={48} className="py-2">
            {logosRow2.map((logo) => (
              <Logo key={logo.name} icon={logo.icon} name={logo.name} />
            ))}
          </Marquee>
        </div>
      </div>
    </div>
  );
}