"use client";

import { motion } from "framer-motion";
import DynamicLogo from "./DynamicLogo";
import Link from "next/link";

interface Partner {
    id: number;
    name: string;
    logo?: string;
    url?: string;
    project_slug?: string;
}

export default function PartnersList({ partners }: { partners: Partner[] }) {
    return (
        <section className="py-24 px-6 md:px-12">
            <div className="max-w-7xl mx-auto">
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 border-t border-l border-black/10">
                    {partners.map((partner, index) => {
                        const card = (
                            <motion.div
                                initial={{ opacity: 0, y: 20 }}
                                whileInView={{ opacity: 1, y: 0 }}
                                viewport={{ once: true }}
                                transition={{ delay: index * 0.05 }}
                                className="p-4 md:p-8 border-r border-b border-black/10 flex items-center justify-center transition-all group relative bg-white/10 overflow-hidden cursor-pointer"
                            >
                                <div className="relative h-[140px] md:h-[180px] w-full overflow-hidden">
                                    <motion.div
                                        whileHover={{ y: "-50%" }}
                                        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
                                        className="flex flex-col items-center h-[200%]"
                                    >
                                        {/* First state */}
                                        <div className="h-1/2 w-full flex items-center justify-center opacity-70 group-hover:opacity-100 transition-all">
                                            {partner.logo ? (
                                                <DynamicLogo
                                                    src={partner.logo}
                                                    color="black"
                                                    width="100%"
                                                    height="100%"
                                                    size="140%"
                                                />
                                            ) : (
                                                <span className="editorial-headline text-xl md:text-2xl text-black uppercase">
                                                    {partner.name}
                                                </span>
                                            )}
                                        </div>

                                        {/* Second state (Slot effect) */}
                                        <div className="h-1/2 w-full flex items-center justify-center">
                                            {partner.logo ? (
                                                <DynamicLogo
                                                    src={partner.logo}
                                                    color="#ff5c00" // primary color
                                                    width="100%"
                                                    height="100%"
                                                    size="140%"
                                                />
                                            ) : (
                                                <span className="editorial-headline text-xl md:text-2xl text-primary uppercase">
                                                    {partner.name}
                                                </span>
                                            )}
                                        </div>
                                    </motion.div>
                                </div>

                                {/* Subtle diagonal hover effect */}
                                <div className="absolute top-0 right-0 w-8 h-8 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                                    <div className="absolute top-0 right-0 w-px h-12 bg-black/5 rotate-[-45deg] origin-top-right" />
                                </div>
                            </motion.div>
                        );

                        if (partner.project_slug) {
                            return (
                                <Link key={partner.id} href={`/works/${partner.project_slug}`} className="block">
                                    {card}
                                </Link>
                            );
                        }

                        return <div key={partner.id}>{card}</div>;
                    })}
                </div>
            </div>
        </section>
    );
}