// "use client";

// import React from "react";
// import { motion } from "framer-motion";
// import { Marquee } from "@/components/magicui/marquee";
// import { cn } from "@/lib/utils";
// import {
//   Apple,
//   Chrome,
//   Facebook,
//   Github,
//   Gitlab,
//   Instagram,
//   Linkedin,
//   Monitor,
//   Slack,
//   Twitter,
//   Youtube,
//   Figma,
//   Dribbble,
//   Framer,
//   FileText,
//   Code,
// } from "lucide-react";

// const LogoIcon = ({
//   icon: Icon,
//   name,
// }: {
//   icon: React.ElementType;
//   name: string;
// }) => {
//   return (
//     <div
//       className={cn(
//         "flex flex-col items-center justify-center mx-8 p-6 h-24 w-40",
//         "rounded-xl border",
//         // light styles
//         "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
//         // dark styles
//         "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
//       )}
//     >
//       <Icon className="w-10 h-10 mb-2" />
//       <span className="text-sm font-medium">{name}</span>
//     </div>
//   );
// };

// const Customers = () => {
//   const firstRowLogos = [
//     { icon: Apple, name: "Apple" },
//     { icon: Monitor, name: "Desktop" },
//     { icon: Github, name: "Github" },
//     { icon: Slack, name: "Slack" },
//     { icon: Twitter, name: "Twitter" },
//     { icon: Linkedin, name: "LinkedIn" },
//     { icon: Facebook, name: "Facebook" },
//     { icon: Instagram, name: "Instagram" },
//   ];

//   const secondRowLogos = [
//     { icon: Chrome, name: "Chrome" },
//     { icon: Youtube, name: "Youtube" },
//     { icon: Gitlab, name: "Gitlab" },
//     { icon: Figma, name: "Figma" },
//     { icon: Dribbble, name: "Dribbble" },
//     { icon: Framer, name: "Framer" },
//     { icon: FileText, name: "Docs" },
//     { icon: Code, name: "Code" },
//   ];

//   return (
//     <section className="my-16 max-w-7xl mx-auto">
//       <div className="container mx-auto px-4">
//         <motion.h2
//           initial={{ y: 20, opacity: 0 }}
//           whileInView={{ y: 0, opacity: 1 }}
//           viewport={{ once: true }}
//           className="text-4xl font-bold text-red-600 text-center mb-16"
//         >
//           Our Customers
//         </motion.h2>

//         <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
//           <Marquee pauseOnHover className="[--duration:30s]">
//             {firstRowLogos.map((logo, index) => (
//               <LogoIcon key={index} icon={logo.icon} name={logo.name} />
//             ))}
//           </Marquee>
//           <Marquee reverse pauseOnHover className="[--duration:30s] mt-8">
//             {secondRowLogos.map((logo, index) => (
//               <LogoIcon key={index} icon={logo.icon} name={logo.name} />
//             ))}
//           </Marquee>
//           <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background"></div>
//           <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background"></div>
//         </div>
//       </div>
//     </section>
//   );
// };

// export default Customers;
"use client";

import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { Marquee } from "@/components/magicui/marquee";
import { cn } from "@/lib/utils";
import Image from "next/image";

interface Partner {
  id: number;
  name: string;
  banner: string;
  created_at: string;
  updated_at: string;
}

const LogoIcon = ({ name, banner }: { name: string; banner: string }) => {
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center mx-8 p-1 h-24 w-40",
        "rounded-xl border",
        // light styles
        "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
        // dark styles
        "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
      )}
    >
      <div className="relative w-20 h-24 mb-2">
        <Image
          src={`${process.env.NEXT_PUBLIC_API_URL}/storage/${banner}`}
          alt={name}
          fill
          className="object-contain"
          unoptimized
        />
      </div>
      {/* <span className="text-sm font-medium">{name}</span> */}
    </div>
  );
};

const Customers = () => {
  const [partners, setPartners] = useState<Partner[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchPartners = async () => {
      try {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_API_URL}/api/partners-list`,
        );
        if (!response.ok) {
          throw new Error("Failed to fetch partners");
        }
        const data = await response.json();
        setPartners(data);
      } catch (err) {
        setError(
          err instanceof Error ? err.message : "An unknown error occurred",
        );
      } finally {
        setLoading(false);
      }
    };

    fetchPartners();
  }, []);

  if (loading) {
    return (
      <section className="my-16 max-w-7xl mx-auto">
        <div className="container mx-auto px-4">
          <motion.h2
            initial={{ y: 20, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            viewport={{ once: true }}
            className="text-4xl font-bold text-red-600 text-center mb-16"
          >
            Our Customers
          </motion.h2>
          <div className="text-center">Loading partners...</div>
        </div>
      </section>
    );
  }

  if (error) {
    return (
      <section className="my-16 max-w-7xl mx-auto">
        <div className="container mx-auto px-4">
          <motion.h2
            initial={{ y: 20, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            viewport={{ once: true }}
            className="text-4xl font-bold text-red-600 text-center mb-16"
          >
            Our Customers
          </motion.h2>
          <div className="text-center text-red-500">Error: {error}</div>
        </div>
      </section>
    );
  }

  const firstRowPartners = partners.slice(0, Math.ceil(partners.length / 2));
  const secondRowPartners = partners.slice(Math.ceil(partners.length / 2));

  return (
    <section className="my-16 max-w-7xl mx-auto">
      <div className="container mx-auto px-4">
        <motion.h2
          initial={{ y: 20, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          viewport={{ once: true }}
          className="text-4xl font-bold text-red-600 text-center mb-16"
        >
          Our Customers
        </motion.h2>

        {partners.length > 0 ? (
          <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
            <Marquee pauseOnHover className="[--duration:30s]">
              {firstRowPartners.map((partner) => (
                <LogoIcon
                  key={partner.id}
                  name={partner.name}
                  banner={partner.banner}
                />
              ))}
            </Marquee>
            {secondRowPartners.length > 0 && (
              <Marquee reverse pauseOnHover className="[--duration:30s] mt-8">
                {secondRowPartners.map((partner) => (
                  <LogoIcon
                    key={partner.id}
                    name={partner.name}
                    banner={partner.banner}
                  />
                ))}
              </Marquee>
            )}
            <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background"></div>
            <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background"></div>
          </div>
        ) : (
          <div className="text-center">No partners available</div>
        )}
      </div>
    </section>
  );
};

export default Customers;