"use client";

import { ArrowRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface DataItem {
  key: number;
  src: string;
  alt: string;
  href: string;
  width: number;
  height: number;
}

const DATA: DataItem[] = [
  {
    key: 1,
    src: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
    alt: "Astro",
    href: "https://astro.build",
    width: 64,
    height: 64,
  },
  {
    key: 2,
    src: "/block-media/shadcnblocks/block/logos/github-icon.svg",
    alt: "GitHub",
    href: "https://github.com",
    width: 64,
    height: 64,
  },
  {
    key: 3,
    src: "/block-media/shadcnblocks/block/logos/google-icon.svg",
    alt: "Google",
    href: "https://google.com",
    width: 64,
    height: 64,
  },
  {
    key: 4,
    src: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
    alt: "Notion",
    href: "https://notion.so",
    width: 64,
    height: 64,
  },
  {
    key: 5,
    src: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
    alt: "Slack",
    href: "https://slack.com",
    width: 64,
    height: 64,
  },
  {
    key: 6,
    src: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
    alt: "استایل‌دهی مدرن",
    href: "https://tailwindcss.com",
    width: 64,
    height: 64,
  },
  {
    key: 8,
    src: "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
    alt: "ویرایشگر کد",
    href: "https://code.visualstudio.com",
    width: 64,
    height: 64,
  },
  {
    key: 12,
    src: "/block-media/shadcnblocks/block/logos/react-icon.svg",
    alt: "React",
    href: "https://reactjs.org",
    width: 64,
    height: 64,
  },
  {
    key: 13,
    src: "/block-media/shadcnblocks/block/logos/vue-icon.svg",
    alt: "Vue.js",
    href: "https://vuejs.org",
    width: 64,
    height: 64,
  },
  {
    key: 15,
    src: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
    alt: "Spotify",
    href: "https://spotify.com",
    width: 64,
    height: 64,
  },
  {
    key: 16,
    src: "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
    alt: "Dropbox",
    href: "https://dropbox.com",
    width: 64,
    height: 64,
  },
];

interface Integration2Props {
  className?: string;
}

const Integration2 = ({ className }: Integration2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        {/* Heading Section */}
        <div className="flex flex-col items-center justify-center gap-4 text-center">
          <h4 className="text-3xl font-medium lg:text-xl">
            پشتوانه بهترین تیم‌های محصول جهان
          </h4>
          <p className="text-xl text-muted-foreground lg:-mt-1">
            از استارتاپ‌های نوآور تا سازمان‌های تثبیت‌شده
          </p>
        </div>

        {/* Marquee Section */}
        <div className="relative my-20 overflow-hidden">
          <div className="flex w-full">
            {/* First marquee group */}
            <div className="flex shrink-0 animate-marquee items-center gap-4">
              {DATA.map((logo) => (
                <a
                  href={logo.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  key={logo.key}
                  className="p-4"
                >
                  <img
                    src={logo.src}
                    alt={logo.alt}
                    width={logo.width}
                    height={logo.height}
                    className="object-contain transition-opacity hover:opacity-70"
                  />
                </a>
              ))}
            </div>
            {/* Second marquee group */}
            <div className="flex shrink-0 animate-marquee items-center gap-4">
              {DATA.map((logo) => (
                <a
                  href={logo.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  key={logo.key}
                  className="p-4"
                >
                  <img
                    src={logo.src}
                    alt={logo.alt}
                    width={logo.width}
                    height={logo.height}
                    className="object-contain transition-opacity hover:opacity-70"
                  />
                </a>
              ))}
            </div>
          </div>
          {/* Gradient overlays */}
          <div className="pointer-events-none absolute inset-y-0 start-0 z-10 w-24 bg-linear-to-r from-background to-transparent" />
          <div className="pointer-events-none absolute inset-y-0 end-0 z-10 w-24 bg-linear-to-l from-background to-transparent" />
        </div>

        {/* Explore Button */}
        <div className="mt-8 flex justify-center">
          <Button className="gap-2 rounded-full">
            مشاهده همه ابزارها
            <ArrowRight className="h-4 w-4 rtl:rotate-180" />
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Integration2 };