"use client";

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

type LogosSimpleStaticLogo = Logo & {
  href?: string;
};
interface Logo {
  src: string;
  alt: string;
  srcDark?: string;
  className?: string;
}

interface LogosSimpleStaticProps {
  heading: string;
  subtitle?: string;
  logos: LogosSimpleStaticLogo[];
  className?: string;
}

type Props = Partial<LogosSimpleStaticProps>;

const defaultProps: LogosSimpleStaticProps = {
  heading: "همراهان ما در طلافروشی و جواهر",
  subtitle: "فروشگاه‌ها و برندهایی که برای ویترین و دکور به مستر دکور اعتماد کرده‌اند",
  logos: [
    {
      src: "/assets/main-pic/logoHam/garoosyLogo.svg",
      alt: "لوگوی همکار ۱",
      className: "h-20 w-auto",
    },
    {
      src: "/assets/main-pic/logoHam/garoosyLogo.svg",
      alt: "لوگوی همکار ۲",
      className: "h-20 w-auto",
    },
    {
      src: "/assets/main-pic/logoHam/garoosyLogo.svg",
      alt: "لوگوی همکار ۳",
      className: "h-20 w-auto",
    },
    {
      src: "/assets/main-pic/logoHam/garoosyLogo.svg",
      alt: "لوگوی همکار ۴",
      className: "h-20 w-auto",
    },
    {
      src: "/assets/main-pic/logoHam/garoosyLogo.svg",
      alt: "لوگوی همکار ۵",
      className: "h-20 w-auto",
    },
    {
      src: "/assets/main-pic/logoHam/garoosyLogo.svg",
      alt: "لوگوی همکار ۶",
      className: "h-20 w-auto",
    },
  ],
};

const Logos21 = (props: Props) => {
  const { heading, subtitle, logos, className } = {
    ...defaultProps,
    ...props,
  };

  const MAX_LOGOS = 6;
  const DARK_LOGO_KEYWORDS = ["kalantari", "bakhtar"];
  const lightLogos = logos.filter(
    (logo) => !DARK_LOGO_KEYWORDS.some((keyword) => logo.src.toLowerCase().includes(keyword)),
  );
  const darkLogos = logos.filter((logo) =>
    DARK_LOGO_KEYWORDS.some((keyword) => logo.src.toLowerCase().includes(keyword)),
  );

  const visibleLogos = [...lightLogos, ...darkLogos].slice(0, MAX_LOGOS);

  return (
    <section className={cn("section-blur-separator py-20 md:py-24 lg:py-28", className)} dir="rtl">
      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6">
        <div className="relative isolate">
          <div className="relative overflow-hidden rounded-3xl border border-primary/30 bg-overlay/25 px-5 py-8 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 sm:px-8 sm:py-10">
            <div
              aria-hidden
              className="pointer-events-none absolute -right-24 -top-24 z-0 h-80 w-80 rounded-full bg-primary/8 blur-3xl sm:h-[24rem] sm:w-[24rem]"
            />
            <div
              aria-hidden
              className="pointer-events-none absolute -bottom-24 -left-24 z-0 h-80 w-80 rounded-full bg-primary/8 blur-3xl sm:h-[24rem] sm:w-[24rem]"
            />
            <div className="relative z-10 flex flex-col items-center text-center">
              <h2 className="text-heading-2 font-semibold text-foreground">
                {heading}
              </h2>
              {subtitle ? (
                <p className="mt-3 text-body text-muted-foreground">{subtitle}</p>
              ) : null}
              <div className="mx-auto mt-8 grid w-full max-w-4xl grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-3 sm:gap-x-8 sm:gap-y-7 lg:gap-x-10 lg:gap-y-8">
                {visibleLogos.map((logo, index) => (
                  <div
                    key={`${logo.src}-${logo.alt}-${index}`}
                    className="group flex min-h-40 items-center justify-center px-3 py-4"
                  >
                    <img
                      src={logo.src}
                      alt={logo.alt}
                      className={cn(
                        logo.className,
                        "h-auto max-h-24 w-full object-contain object-center grayscale saturate-0 brightness-[2.1] contrast-75 opacity-95 transition duration-300 group-hover:brightness-100 group-hover:contrast-100 group-hover:opacity-100 group-hover:grayscale-0 group-hover:saturate-100 sm:max-h-28",
                      )}
                    />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Logos21 };