"use client";

import React from "react";

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

interface Integration8Props {
  className?: string;
}

const logos = [
  {
    image: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
    name: "Slack",
  },
  {
    image: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
    name: "Notion",
  },
  {
    image: "/block-media/shadcnblocks/block/logos/github-icon.svg",
    name: "GitHub",
  },
  {
    image: "/block-media/shadcnblocks/block/logos/google-icon.svg",
    name: "Google",
  },
  {
    image: "/block-media/shadcnblocks/block/logos/nike-icon.svg",
    name: "Nike",
  },
  {
    image: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
    name: "Sketch",
  },
  {
    image: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
    name: "Figma",
  },
];

const Integration8 = ({ className }: Integration8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container pt-32">
        <h1 className="text-center text-2xll font-medium tracking-tight md:text-2xll">
          یکپارچه با اپلیکیشن‌های محبوب
        </h1>
        <p className="mx-auto mt-4 max-w-xl text-center tracking-tight text-muted-foreground/80 md:text-lg">
          ابزارهای محبوبتان را به پلتفرم متصل کنید و گردش‌کار خود را ساده‌تر و
          یکپارچه‌تر کنید.
        </p>

        <div className="relative mt-12">
          <Marquee pauseOnHover className="[--duration:20s]">
            {logos.map((logo, index) => (
              <div
                key={index}
                className="flex items-center justify-center gap-4 rounded-full bg-muted px-5 py-2"
              >
                <img
                  src={logo.image}
                  alt={logo.name}
                  className="size-5"
                />
                <p className="text-lg">{logo.name}</p>
              </div>
            ))}
          </Marquee>
          <Marquee pauseOnHover reverse className="[--duration:20s]">
            {logos.map((logo, index) => (
              <div
                key={`reverse-${index}`}
                className="flex items-center justify-center gap-4 rounded-full bg-muted px-5 py-2"
              >
                <img
                  src={logo.image}
                  alt={logo.name}
                  className="size-5"
                />
                <p className="text-lg">{logo.name}</p>
              </div>
            ))}
          </Marquee>
          <Marquee pauseOnHover className="[--duration:20s]">
            {[...logos].reverse().map((logo, index) => (
              <div
                key={`rev-list-${index}`}
                className="flex items-center justify-center gap-4 rounded-full bg-muted px-5 py-2"
              >
                <img
                  src={logo.image}
                  alt={logo.name}
                  className="size-5"
                />
                <p className="text-lg">{logo.name}</p>
              </div>
            ))}
          </Marquee>
          <Marquee pauseOnHover reverse className="[--duration:20s]">
            {[...logos].reverse().map((logo, index) => (
              <div
                key={`rev-list-reverse-${index}`}
                className="flex items-center justify-center gap-4 rounded-full bg-muted px-5 py-2"
              >
                <img
                  src={logo.image}
                  alt={logo.name}
                  className="size-5"
                />
                <p className="text-lg">{logo.name}</p>
              </div>
            ))}
          </Marquee>
          <div className="pointer-events-none absolute inset-y-0 start-0 z-10 w-36 bg-gradient-to-r from-background" />
          <div className="pointer-events-none absolute inset-y-0 end-0 z-10 w-36 bg-gradient-to-l from-background" />
        </div>
      </div>
    </section>
  );
};

export { Integration8 };