import { ChevronRight, Zap } from "lucide-react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

const cards = [
  {
    image:
      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
    imageAlt: "گزارش مالی یکپارچه",
    badge: "یکپارچگی",
    badgeVariant: "primary" as const,
    title: "مدیریت دارایی",
    linkText: "عملیات",
  },
  {
    image:
      "/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
    imageAlt: "داشبورد ERP",
    badge: "مدیریت سازمان",
    badgeVariant: "avatar" as const,
    title: "بودجه‌بندی",
    linkText: "ERP",
  },
  {
    image:
      "/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg",
    imageAlt: "مدیریت عملیات",
    badge: "ERP",
    badgeVariant: "default" as const,
    title: "مدیریت مالی",
    linkText: "ERP",
  },
];

function CardBadge({
  variant,
  label,
}: {
  variant: (typeof cards)[number]["badgeVariant"];
  label: string;
}) {
  if (variant === "avatar") {
    return (
      <span className="ms-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm">
        <Avatar className="size-7 rounded-full">
          <AvatarImage
            src="/block-media/shadcnblocks/block/avatar-1.webp"
            alt="گزارش مالی یکپارچه"
          />
        </Avatar>
        {label}
      </span>
    );
  }

  if (variant === "primary") {
    return (
      <span className="ms-auto flex w-fit items-center gap-1 rounded-full bg-primary px-4 py-2.5 text-sm font-semibold text-background">
        <Zap className="h-auto w-6 fill-background" />
        {label}
      </span>
    );
  }

  return (
    <span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
      <Zap className="h-auto w-6 fill-background" />
      {label}
    </span>
  );
}

interface Feature117Props {
  className?: string;
}

const Feature117 = ({ className }: Feature117Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h1 className="mb-4 text-center text-xl font-semibold">
          عملیات سازمان را یکپارچه کنید
        </h1>
        <p className="text-center text-muted-foreground">
          از خرید تا فروش در یک سیستم
        </p>
        <div className="grid gap-5 pt-14 xl:grid-cols-3">
          {cards.map((card) => (
            <a
              key={card.title}
              href="#"
              className="group relative overflow-hidden rounded-xl"
            >
              <img
                src={card.image}
                alt={card.imageAlt}
                className="h-full max-h-[450px] w-full rounded-xl object-cover object-center"
              />
              <div className="absolute inset-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" />
              <div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
                <CardBadge variant={card.badgeVariant} label={card.badge} />
                <div className="flex flex-col gap-5 text-background">
                  <h4 className="text-xl font-semibold lg:text-3xl">
                    {card.title}
                  </h4>
                  <p className="flex items-center gap-1 font-medium">
                    {card.linkText}
                    <ChevronRight className="h-auto w-4 rtl:rotate-180" />
                  </p>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature117 };