import * as React from "react"

import { LogoCarousel } from "@/components/ui/logo-carousel"

import { Command, Figma, Framer, Github, Hexagon, Layers, Triangle, Boxes } from "lucide-react"

const LOGOS = [

{ id: 1, name: "Command", icon: <Command className="w-6 h-6" /> },

{ id: 2, name: "Figma", icon: <Figma className="w-6 h-6" /> },

{ id: 3, name: "Framer", icon: <Framer className="w-6 h-6" /> },

{ id: 4, name: "Github", icon: <Github className="w-6 h-6" /> },

{ id: 5, name: "Hexagon", icon: <Hexagon className="w-6 h-6" /> },

{ id: 6, name: "Layers", icon: <Layers className="w-6 h-6" /> },

{ id: 7, name: "Triangle", icon: <Triangle className="w-6 h-6" /> },

{ id: 8, name: "Boxes", icon: <Boxes className="w-6 h-6" /> },

]

export default function LogoCarouselDemo() {

return (

<div className="w-full h-full min-h-[500px] flex items-center justify-center bg-white dark:bg-[#1C1C1C]">

<div className="w-full max-w-4xl mx-auto px-4 py-20 flex flex-col items-center">

<h3 className="text-sm font-medium text-zinc-400 dark:text-zinc-500 mb-12 tracking-wide uppercase">

Trusted by innovative teams

</h3>

{/* We use a mask to fade out the edges for a polished look */}

<div className="w-full relative [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]">

<LogoCarousel logos={LOGOS} columnCount={4} interval={3000} />

</div>

</div>

</div>

)

}