import { HandHelping, Users, Zap } from "lucide-react";
import React from "react";

import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import type { HeroFeatureIconsProps } from "@/lib/hero-feature-icons";
import { cn } from "@/lib/utils";

const Hero45 = ({
  badge = "پلتفرم توسعه",
  heading = "مجموعه‌ای از بلاک‌های آماده برای توسعه رابط کاربری",
  images = [
    {
      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
      alt: "تصویر نمونه",
    },
  ],
  features = [
    {
      icon: HandHelping,
      title: "پشتیبانی حرفه‌ای",
      description:
        "کارشناسان ما آماده‌اند تا در تمام مراحل راه‌اندازی و توسعه همراه شما باشند.",
    },
    {
      icon: Users,
      title: "همکاری تیمی",
      description:
        "با ابزارهای مدیریت پروژه و ارتباطات، همکاری میان اعضای تیم را بهبود دهید.",
    },
    {
      icon: Zap,
      title: "عملکرد سریع",
      description:
        "زیرساخت بهینه، سرعت بالا و عملکرد پایدار را برای کاربران فراهم می‌کند.",
    },
  ],
  className,
}: HeroFeatureIconsProps) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container overflow-hidden">
        <div className="mb-20 flex flex-col items-center gap-6 text-center">
          <Badge variant="outline">{badge}</Badge>
          <h1 className="text-xl font-semibold lg:text-2xll">{heading}</h1>
        </div>
        <div className="relative mx-auto max-w-5xl">
          <img
            src={images[0].src}
            alt={images[0].alt}
            className="aspect-video max-h-[500px] w-full rounded-xl object-cover"
          />
          <div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent"></div>
          <div className="absolute -top-28 -right-28 -z-10 aspect-video h-72 w-96 [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_20%,transparent_100%)] [background-size:12px_12px] opacity-40 sm:bg-[radial-gradient(hsl(var(--muted-foreground))_1px,transparent_1px)]"></div>
          <div className="absolute -top-28 -left-28 -z-10 aspect-video h-72 w-96 [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_20%,transparent_100%)] [background-size:12px_12px] opacity-40 sm:bg-[radial-gradient(hsl(var(--muted-foreground))_1px,transparent_1px)]"></div>
        </div>
        <div className="mx-auto mt-10 flex max-w-5xl flex-col md:flex-row">
          {features.map((feature, index) => (
            <React.Fragment key={feature.title}>
              {index > 0 && (
                <Separator
                  orientation="vertical"
                  className="mx-6 hidden h-auto w-[2px] bg-linear-to-b from-muted via-transparent to-muted md:block"
                />
              )}
              <div
                key={index}
                className="flex grow basis-0 flex-col rounded-md bg-background p-4"
              >
                <div className="mb-6 flex size-10 items-center justify-center rounded-full bg-background drop-shadow-lg">
                  <feature.icon className="h-auto w-5" />
                </div>
                <h3 className="mb-2 font-semibold">{feature.title}</h3>
                <p className="text-sm text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Hero45 };