"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Image from "next/image";
import { GitCompare } from "lucide-react";

gsap.registerPlugin(ScrollTrigger);

type LogoCarouselProps = {
  title?: string;
  description?: string;
  badgeText?: string;
  badgeIcon?: React.ReactNode;
  rows?: string[][];
};

const Feature2 = ({
  title = "Don't replace. Integrate.",
  description = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo quos quibusdam, dolor obcaecati dolore, at repellat.",
  badgeText = "Integrations",
  badgeIcon = <GitCompare />,
  rows = [
    [
      "https://library.rapid-ui.com/images/blocks/feature2/airtable.png",
      "https://library.rapid-ui.com/images/blocks/feature2/asana.png",
      "https://library.rapid-ui.com/images/blocks/feature2/aws.png",
      "https://library.rapid-ui.com/images/blocks/feature2/bing.png",
      "https://library.rapid-ui.com/images/blocks/feature2/codeigniter.png",
      "https://library.rapid-ui.com/images/blocks/feature2/cyclejs.png",
      "https://library.rapid-ui.com/images/blocks/feature2/discord.png",
      "https://library.rapid-ui.com/images/blocks/feature2/firebase.png",
      "https://library.rapid-ui.com/images/blocks/feature2/gitlab.png",
      "https://library.rapid-ui.com/images/blocks/feature2/gmail.png",
      "https://library.rapid-ui.com/images/blocks/feature2/mailchimp.png",
      "https://library.rapid-ui.com/images/blocks/feature2/airtable.png",
      "https://library.rapid-ui.com/images/blocks/feature2/asana.png",
    ],
    [
      "https://library.rapid-ui.com/images/blocks/feature2/gmail.png",
      "https://library.rapid-ui.com/images/blocks/feature2/mailchimp.png",
      "https://library.rapid-ui.com/images/blocks/feature2/gitlab.png",
      "https://library.rapid-ui.com/images/blocks/feature2/ga.png",
      "https://library.rapid-ui.com/images/blocks/feature2/mailchimp.png",
      "https://library.rapid-ui.com/images/blocks/feature2/monday.png",
      "https://library.rapid-ui.com/images/blocks/feature2/notion.png",
      "https://library.rapid-ui.com/images/blocks/feature2/paypal.png",
      "https://library.rapid-ui.com/images/blocks/feature2/shopify.png",
      "https://library.rapid-ui.com/images/blocks/feature2/supabase.png",
      "https://library.rapid-ui.com/images/blocks/feature2/trello.png",
      "https://library.rapid-ui.com/images/blocks/feature2/gmail.png",
      "https://library.rapid-ui.com/images/blocks/feature2/mailchimp.png",
    ],
  ],
}: LogoCarouselProps) => {
  const sectionRef = useRef<HTMLDivElement | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const rowRefs = useRef<(HTMLDivElement | null)[]>([]);

  useEffect(() => {
    rowRefs.current.forEach((row, index) => {
      if (!row) return;

      const rowWidth = row.scrollWidth; // Get the full width of the row
      const containerWidth = containerRef.current?.offsetWidth || 0;
      const overflowWidth = rowWidth - containerWidth; // How much overflows

      // Set initial position
      gsap.set(row, {
        x: index % 2 === 1 ? -overflowWidth : 0, // Offset the second row correctly
      });

      // Animate the rows
      gsap.to(row, {
        x: -overflowWidth / 2, // Move both rows at the same speed
        scrollTrigger: {
          trigger: containerRef.current,
          start: "top 80%",
          toggleActions: "play none none none",
          scrub: true,
        },
      });
    });
  }, []);

  return (
    <div
      ref={sectionRef}
      className="px-10 max-sm:px-5 py-96 max-w-[1600px] mx-auto"
    >
      <div
        ref={containerRef}
        className="bg-[#263C3C] rounded-2xl pb-32 overflow-hidden border-[3px] border-[#263C3C]"
      >
        <div>
          {/* HEADER SECTION */}
          <div className="flex flex-col items-center gap-10 max-sm:gap-5 mx-auto py-32 max-sm:py-20 px-2">
            <div className="flex items-center gap-2 rounded-full px-3 py-0.5 border border-gray-200 bg-white text-sm font-medium">
              {badgeIcon}
              {badgeText}
            </div>
            <h2 className="max-sm:text-3xl sm:text-4xl lg:text-5xl font-medium max-md:text-center md:leading-tight text-center text-white">
              {title}
            </h2>
            <p className="text-gray-200 text-lg max-w-lg text-center max-sm:text-base">
              {description}
            </p>
          </div>

          {/* LOGO ROWS */}
          <div className="flex flex-col gap-8">
            {rows.map((row, index) => (
              <div
                ref={(el) => {
                  rowRefs.current[index] = el;
                }}
                className={`row-${index + 1} flex gap-8 max-sm:gap-4 no-wrap`}
                key={index}
              >
                {row.map((logo, i) => (
                  <div
                    className="max-sm:w-16 max-sm:h-16 w-28 h-28 p-6 max-sm:p-4 bg-white rounded-xl shrink-0 flex justify-center"
                    key={i}
                  >
                    <Image
                      className="h-full w-auto object-contain"
                      src={logo}
                      alt={`logo-${i}`}
                      width={512}
                      height={512}
                    />
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export { Feature2 };
feature-2
