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

interface Logos1Props {
  className?: string;
}

const Logos1 = ({ className }: Logos1Props) => {
  const partners = [
    {
      name: "Astro",
      logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
    },
    {
      name: "Vercel",
      logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
    },
    {
      name: "Astro",
      logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
    },
    {
      name: "Supabase",
      logo: "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
    },
    {
      name: "Figma",
      logo: "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
    },
  ];

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "container flex flex-wrap items-center justify-between gap-12 py-32",
        className,
      )}
    >
      <p className="text-start text-lg leading-[140%] tracking-[-0.32px] text-primary">
        مورد استفاده شرکت‌های پیشرو جهان
      </p>
      <div className="flex flex-wrap items-center gap-x-8 gap-y-6 opacity-70 grayscale lg:gap-[60px]">
        {partners.map((partner, index) => (
          <img
            key={index}
            src={partner.logo}
            alt={`لوگوی ${partner.name}`}
            width={109}
            height={48}
            className="object-contain"
          />
        ))}
      </div>
    </section>
  );
};

export { Logos1 };