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

interface Integration {
  id: string;
  icon: string;
}

interface Hero32Props {
  className?: string;
  heading?: string;
  description?: string;
  button?: {
    text: string;
    url: string;
  };
  integrations?: Integration[][];
}

const Hero32 = ({
  heading = "مجموعه‌ای از بلاک‌های آماده برای توسعه رابط کاربری",
  description = "تمام بلاک، تصاویر و بخش‌های رابط کاربری به‌صورت مستقل طراحی شده‌اند تا به‌راحتی قابل سفارشی‌سازی باشند.",
  button = {
    text: "مشاهده همه بلاک‌ها",
    url: "https://www.ShadcnBlocks",
  },
  integrations = [
    [
      {
        id: "integration-1",
        icon: "/block-media/shadcnblocks/block/block-1.svg",
      },
      {
        id: "integration-2",
        icon: "/block-media/shadcnblocks/block/block-2.svg",
      },
      {
        id: "integration-3",
        icon: "/block-media/shadcnblocks/block/block-3.svg",
      },
      {
        id: "integration-4",
        icon: "/block-media/shadcnblocks/block/block-4.svg",
      },
      {
        id: "integration-5",
        icon: "/block-media/shadcnblocks/block/block-5.svg",
      },
    ],
    [
      {
        id: "integration-6",
        icon: "/block-media/shadcnblocks/block/block-6.svg",
      },
      {
        id: "integration-7",
        icon: "/block-media/shadcnblocks/block/block-1.svg",
      },
      {
        id: "integration-8",
        icon: "/block-media/shadcnblocks/block/block-2.svg",
      },
      {
        id: "integration-9",
        icon: "/block-media/shadcnblocks/block/block-3.svg",
      },
      {
        id: "integration-10",
        icon: "/block-media/shadcnblocks/block/block-4.svg",
      },
    ],
    [
      {
        id: "integration-11",
        icon: "/block-media/shadcnblocks/block/block-5.svg",
      },
      {
        id: "integration-12",
        icon: "/block-media/shadcnblocks/block/block-6.svg",
      },
      {
        id: "integration-13",
        icon: "/block-media/shadcnblocks/block/block-1.svg",
      },
      {
        id: "integration-14",
        icon: "/block-media/shadcnblocks/block/block-2.svg",
      },
      {
        id: "integration-15",
        icon: "/block-media/shadcnblocks/block/block-3.svg",
      },
    ],
  ],
  className,
}: Hero32Props) => {
  return (
    <section className={cn("relative overflow-hidden", className)}>
      <div className="absolute inset-x-0 top-0 flex h-full w-full items-center justify-center opacity-100">
        <img
          alt="پس‌زمینه"
          src="/block-media/shadcnblocks/block/patterns/square-alt-grid.svg"
          className="[mask-image:radial-gradient(75%_75%_at_center,white,transparent)] opacity-90"
        />
      </div>
      <div className="relative">
        <div className="relative container flex flex-col items-start md:flex-row md:items-center md:-space-x-26">
          <div className="z-20 w-full shrink-0 bg-background pt-32 md:-mx-4 md:w-1/2 md:bg-transparent md:px-4 md:pb-32">
            <div className="flex flex-col items-start text-start">
              <div className="max-w-sm">
                <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
                  {heading}
                </h1>
                <p className="text-muted-foreground">{description}</p>
                <Button asChild size="lg" className="mt-10">
                  <a href={button.url}>{button.text}</a>
                </Button>
              </div>
            </div>
          </div>
          <div>
            <div className="flex -translate-x-10 flex-col gap-8 pt-12 pb-8 sm:-translate-x-0 md:gap-16 md:py-32">
              {integrations.map((line, i) => (
                <div key={i} className="flex gap-x-22 even:translate-x-22">
                  {line.map((integration) => (
                    <div
                      key={integration.id}
                      className="size-22 rounded-xl border border-background bg-background shadow-xl"
                    >
                      <div className="h-full w-full bg-muted/20 p-4">
                        <img
                          alt="یکپارچه‌سازی"
                          src={integration.icon}
                          className="size-full dark:invert"
                        />
                      </div>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero32 };