"use client";

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

const images = [
    {
        img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV9uzErWz9EXqZDxZ5lP9aYpMz8eK6rr5X3w&s",
    },
    {
        img: "https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8ed3d547-94ff-48e1-9f20-8c14a7030a02_2000x2000.jpeg",
    },
    {
        img: "https://cdn.vectorstock.com/i/1000v/48/43/google-symbol-logo-black-and-white-design-vector-46334843.jpg",
    },
    {
        img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQADFN8_BR0poY4_U86hIDw6bB-iXS2UUXmoQ&s",
    },
    {
        img: "https://miro.medium.com/v2/resize:fit:1400/1*O-ClkORJkmUm1wRsApB_yQ.png",
    },
    {
        img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9R9N0XiqvtWH8Qr0zHTfYLxoPh__Hc4HayrA1AwxNwSmpLVSR9jg4HoxK4zCx5AQVdJ0&usqp=CAU",
    },
];

// Card Component for displaying each partner's logo
const FaceCard = ({ img }: { img: string }) => {
    return (
        <div
            className={cn(
                "relative h-28 w-28 cursor-pointer overflow-hidden rounded-xl flex items-center justify-center", // Made cards square
            )}
        >
            <img className="h-full w-full object-cover" alt="" src={img} /> {/* Removed alt text and made image fill the card */}
        </div>
    );
};

export function Faces() {
    const firstRow = images.slice(0, Math.ceil(images.length / 2));
    const secondRow = images.slice(Math.ceil(images.length / 2));

    return (
        <div className="relative flex h-[500px] w-full flex-row items-center justify-center overflow-hidden rounded-lg bg-transparent md:shadow-xl">
            {/* First Vertical Marquee */}
            <Marquee pauseOnHover vertical className="[--duration:20s]">
                {firstRow.map((partner, index) => (
                    <FaceCard key={index} {...partner} />
                ))}
            </Marquee>

            <Marquee reverse pauseOnHover vertical className="[--duration:20s]">
                {secondRow.map((partner, index) => (
                    <FaceCard key={index} {...partner} />
                ))}
            </Marquee>

            <Marquee pauseOnHover vertical className="[--duration:20s]">
                {firstRow.map((partner, index) => (
                    <FaceCard key={index} {...partner} />
                ))}
            </Marquee>

            {/* Gradients for top and bottom fade effect */}
            <div className="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-t from-transparent to-[#080E12]"></div>
            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-b from-transparent to-[#080E12]"></div>
        </div>
    );
}