import { ArrowRight } from "lucide-react";

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

const logos = [
  {
    id: "logo-1",
    description: "لوگوی ۱",
    image:
      "/block-media/shadcnblocks/block/block-1.svg",
  },
  {
    id: "logo-2",
    description: "لوگوی ۲",
    image:
      "/block-media/shadcnblocks/block/block-2.svg",
  },
  {
    id: "logo-3",
    description: "لوگوی ۳",
    image:
      "/block-media/shadcnblocks/block/block-3.svg",
  },
  {
    id: "logo-4",
    description: "لوگوی ۴",
    image:
      "/block-media/shadcnblocks/block/block-4.svg",
  },
  {
    id: "logo-5",
    description: "لوگوی ۵",
    image:
      "/block-media/shadcnblocks/block/block-5.svg",
  },
  {
    id: "logo-6",
    description: "لوگوی ۶",
    image:
      "/block-media/shadcnblocks/block/block-6.svg",
  },
];

interface Logos2Props {
  className?: string;
}

const Logos2 = ({ className }: Logos2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid overflow-hidden rounded-xl border border-border md:grid-cols-2">
          <div className="my-auto px-6 py-10 sm:px-10 sm:py-12 lg:p-16">
            <div className="w-full text-start md:max-w-md">
              <h2 className="mb-4 text-xl font-semibold lg:text-3xl">
                گواهی‌های ما گویای همه چیز است
              </h2>
              <p className="mb-6 text-lg">
                کیفیت و استاندارد در هر مرحله برای ما اهمیت دارد. گواهینامه‌های
                معتبر نشان‌دهنده تعهد ما به ارائه خدمات قابل اعتماد است.
              </p>
              <Button className="w-full md:w-fit">
                تماس بگیرید
                <ArrowRight className="ms-2 size-5 rtl:rotate-180" />
              </Button>
            </div>
          </div>
          <div className="grid grid-cols-3 border-t border-border md:border-s md:border-t-0">
            {logos.map((logo) => (
              <div
                key={logo.id}
                className="-mb-px flex items-center justify-center border-e border-b border-border p-5 nth-[3n]:border-e-0 sm:p-6"
              >
                <img
                  src={logo.image}
                  alt={logo.description}
                  className="size-12 object-cover object-center sm:size-16 lg:size-24"
                ></img>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Logos2 };