"use client";

import Marquee from "react-fast-marquee";

import { cn } from "@/lib/utils";

interface Company {
  name: string;
  logo: string;
  href?: string;
}

interface Logos17Props {
  heading?: string;
  subheading?: string;
  topRowCompanies?: Company[];
  bottomRowCompanies?: Company[];
  className?: string;
}

const Logos17 = ({
  heading = "پشتوانه بهترین تیم‌های محصول جهان.",
  subheading = "از استارتاپ‌های نسل جدید تا شرکت‌های تثبیت‌شده.",
  topRowCompanies = [
    {
      name: "Mercury",
      logo: "/block-media/shadcnblocks/block/logos/mercury.svg",
      href: "#",
    },
    {
      name: "Watershed",
      logo: "/block-media/shadcnblocks/block/logos/watershed.svg",
      href: "#",
    },
    {
      name: "Retool",
      logo: "/block-media/shadcnblocks/block/logos/retool.svg",
      href: "#",
    },
    {
      name: "Descript",
      logo: "/block-media/shadcnblocks/block/logos/descript.svg",
      href: "#",
    },
  ],
  bottomRowCompanies = [
    {
      name: "Perplexity",
      logo: "/block-media/shadcnblocks/block/logos/perplexity.svg",
      href: "#",
    },
    {
      name: "Monzo",
      logo: "/block-media/shadcnblocks/block/logos/monzo.svg",
      href: "#",
    },
    {
      name: "Ramp",
      logo: "/block-media/shadcnblocks/block/logos/ramp.svg",
      href: "#",
    },
    {
      name: "Raycast",
      logo: "/block-media/shadcnblocks/block/logos/raycast.svg",
      href: "#",
    },
    {
      name: "Arc",
      logo: "/block-media/shadcnblocks/block/logos/arc.svg",
      href: "#",
    },
  ],
  className,
}: Logos17Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden pb-28 lg:pb-32", className)}
    >
      <div className="container space-y-10 lg:space-y-16">
        <div className="text-center">
          <h2 className="mb-4 text-xl text-balance md:text-xl lg:text-3xl">
            {heading}
            <br className="max-md:hidden" />
            <span className="text-muted-foreground">{subheading}</span>
          </h2>
        </div>

        <div className="flex w-full flex-col items-center gap-8">
          {/* Top row - 4 logos */}
          <LogoRow
            companies={topRowCompanies}
            gridClassName="grid-cols-4"
            direction="right"
          />

          {/* Bottom row - 5 logos */}
          <LogoRow
            companies={bottomRowCompanies}
            gridClassName="grid-cols-5"
            direction="left"
          />
        </div>
      </div>
    </section>
  );
};

interface LogoRowProps {
  companies: Company[];
  gridClassName: string;
  direction?: "left" | "right";
}

const LogoRow = ({ companies, gridClassName, direction }: LogoRowProps) => {
  return (
    <>
      {/* Desktop static version */}
      <div className="hidden md:block">
        <div
          className={cn(
            "grid items-center justify-items-center gap-x-20 lg:gap-x-28",
            gridClassName,
          )}
        >
          {companies.map((company, index) => (
            <a href={company.href || "#"} target="_blank" key={company.logo}>
              <img
                src={company.logo}
                alt={`لوگوی ${company.name}`}
                className="h-8 w-auto object-contain opacity-50 transition-opacity hover:opacity-70 dark:invert"
              />
            </a>
          ))}
        </div>
      </div>

      {/* Mobile marquee version */}
      <div className="md:hidden">
        <Marquee direction={direction} pauseOnHover>
          {companies.map((company, index) => (
            <a
              href={company.href || "#"}
              target="_blank"
              key={company.logo}
              className="mx-8 inline-block transition-opacity hover:opacity-70"
            >
              <img
                src={company.logo}
                alt={`لوگوی ${company.name}`}
                className="h-8 w-auto object-contain"
              />
            </a>
          ))}
        </Marquee>
      </div>
    </>
  );
};

export { Logos17 };