"use client";

import { cn } from "@/lib/utils";
import { Marquee } from "@/components/ui/marquee";

const images = [
    "https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
    "https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
    "https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
    "https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
    "https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
    "https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];

export function Partners() {
    return (
        <div className="h-screen flex flex-col items-center justify-center space-y-10">
            <div className="flex flex-col items-center justify-center space-y-6">
                <h1 className="text-white text-4xl">Partners</h1>
                <div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent">
                    <Marquee pauseOnHover className="[--duration:20s]">
                        <div className="flex space-x-6">
                            {images.map((img, index) => (
                                <img
                                    key={index}
                                    src={img}
                                    alt={`Avatar ${index + 1}`}
                                    className="h-32 w-32 rounded-full object-cover"
                                />
                            ))}
                        </div>
                    </Marquee>
                    <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
                    <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
                </div>
            </div>

            <div className="flex flex-col items-center justify-center space-y-6">
                <h1 className="text-white text-4xl">Customers</h1>
                <div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent md:shadow-xl">
                    <Marquee reverse pauseOnHover className="[--duration:20s]">
                        <div className="flex space-x-6">
                            {images.map((img, index) => (
                                <img
                                    key={index}
                                    src={img}
                                    alt={`Avatar ${index + 1}`}
                                    className="h-32 w-32 rounded-full object-cover"
                                />
                            ))}
                        </div>
                    </Marquee>
                    <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
                    <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
                </div>
            </div>
        </div>
    );
}