"use client";

import {
  ArrowRight,
  Blocks,
  Fingerprint,
  LayoutPanelTop,
  MessageCircleMore,
  Users,
  type LucideIcon,
} from "lucide-react";
import { useState } from "react";

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

const features: {
  title: string;
  description: string;
  icon: LucideIcon;
}[] = [
  {
    title: "تریگر رویداد",
    description:
      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    icon: MessageCircleMore,
  },
  {
    title: "شرط هوشمند",
    description: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
    icon: Blocks,
  },
  {
    title: "اعلان خودکار",
    description: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
    icon: Users,
  },
  {
    title: "تأیید چندمرحله‌ای",
    description: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
    icon: LayoutPanelTop,
  },
  {
    title: "لاگ اجرا",
    description: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    icon: Fingerprint,
  },
];

interface Feature122Props {
  className?: string;
}

const Feature122 = ({ className }: Feature122Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("container py-40", className)}>
      <div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-3 md:grid-rows-3">
        {features.map((feature) => (
          <DataBlock key={feature.title} {...feature} />
        ))}
        <div className="flex w-full grow flex-col gap-6 rounded-lg bg-accent/80 p-6 transition-all hover:bg-accent md:col-span-2 md:col-start-2 md:row-span-2 md:row-start-2 lg:p-10">
          <div className="flex flex-col items-start justify-between gap-5 md:flex-row md:items-center">
            <h3 className="max-w-[85%] text-start text-xl font-bold tracking-tight md:max-w-[60%] lg:text-3xl">
              قالب آماده
            </h3>
            <Button className="w-full sm:w-auto" size="lg">
              شروع کنید
            </Button>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
            alt="سازنده گردش‌کار"
            className="aspect-square h-full w-full rounded-lg object-cover md:aspect-[3]"
          />
        </div>
      </div>
    </section>
  );
};

export { Feature122 };

function DataBlock({
  title,
  description,
  icon: Icon,
}: (typeof features)[number]) {
  const [isBlockHover, setBlockHover] = useState(false);

  return (
    <a
      href="#"
      className="flex w-full cursor-pointer flex-col rounded-lg bg-accent/80 p-6 text-start transition-all hover:bg-accent lg:p-8"
      onMouseOver={() => setBlockHover(true)}
      onMouseOut={() => setBlockHover(false)}
    >
      <h3
        className={cn(
          "mb-3 w-fit border-b border-solid border-transparent text-lg font-bold tracking-tight transition lg:text-xl",
          isBlockHover && "border-primary/80!",
        )}
      >
        {title}
      </h3>
      <p className="mb-5 text-sm text-muted-foreground/90 lg:text-base">
        {description}
      </p>
      <div className="mt-auto flex items-end justify-between">
        <Icon className="size-10 text-primary/90 md:size-12" strokeWidth={1.5} />
        <ArrowRight
          className={cn(
            "size-5 h-fit text-primary/80 transition-all rtl:rotate-180",
            isBlockHover && "translate-x-1.5 rtl:-translate-x-1.5",
          )}
          strokeWidth={1.5}
        />
      </div>
    </a>
  );
}