import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { cn } from "@/lib/utils";

type FadeDirection = "right" | "bottom" | "top";

type ItemType = {
  title: string;
  description: string;
  image: { src: string; alt: string; className: string };
  fade: FadeDirection[];
  containerClassName?: string;
};

const ITEMS: ItemType[] = [
  {
    title: "داشبورد سفارشی",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    containerClassName: "flex-1",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
      alt: "گزارش عملکرد",
      className:
        "translate-x-6 rounded-be-none md:translate-x-10 lg:translate-x-20 rtl:-translate-x-6 rtl:md:-translate-x-10 rtl:lg:-translate-x-20",
    },
    fade: ["right"],
  },
  {
    title: "فیلتر پیشرفته",
    description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-2.svg",
      alt: "داشبورد تحلیل داده",
      className:
        "translate-x-6 md:translate-x-10 lg:translate-x-20 rtl:-translate-x-6 rtl:md:-translate-x-10 rtl:lg:-translate-x-20",
    },
    fade: ["right", "bottom"],
  },
  {
    title: "نمودار روند",
    description:
      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
    containerClassName:
      "mb-10 translate-x-6 md:translate-x-10 rtl:-translate-x-6 rtl:md:-translate-x-10",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-3.svg",
      alt: "نمودار شاخص کلیدی",
      className: "",
    },
    fade: ["right", "top"],
  },
  {
    title: "هشدار آستانه",
    description:
      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
    containerClassName: "mx-10 my-6 aspect-280/83",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-4.svg",
      alt: "گزارش عملکرد",
      className: "",
    },
    fade: [],
  },
  {
    title: "گزارش زمان‌بندی‌شده",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    containerClassName: "mb-10 mx-10 lg:mx-20 aspect-230/124",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-5.svg",
      alt: "داشبورد تحلیل داده",
      className: "",
    },
    fade: [],
  },
];

interface Feature174Props {
  className?: string;
}

const Feature174 = ({ className }: Feature174Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted py-32", className)}>
      <div className="container">
        <h2 className="text-center text-3xl font-semibold tracking-tight text-balance sm:text-xl md:text-2xll lg:text-2xll">
          داده پراکنده را به تصمیم تبدیل کنید
        </h2>

        <div className="mt-8 grid grid-cols-1 gap-4 md:mt-12 md:max-h-[800px] md:grid-cols-6 md:grid-rows-5 lg:mt-20">
          {ITEMS.map((item, i) => {
            const gridClasses = {
              0: "md:col-span-3 md:row-span-3",
              1: "md:col-span-3 md:row-span-3 md:col-start-4",
              2: "md:col-span-2 md:row-span-2 md:row-start-4",
              3: "md:col-span-2 md:row-span-2 md:col-start-3 md:row-start-4",
              4: "md:col-span-2 md:row-span-2 md:col-start-5 md:row-start-4",
            }[i];
            return <Item key={item.title} {...item} className={gridClasses} />;
          })}
        </div>
      </div>
    </section>
  );
};

const Item = ({
  title,
  description,
  image,
  fade = [],
  className,
  containerClassName,
}: ItemType & { className?: string }) => {
  return (
    <Card
      className={cn(
        "relative flex max-h-[400px] flex-col overflow-hidden border-none px-0 text-lg shadow-none md:max-h-none",
        className,
      )}
    >
      <CardHeader className="mb-2 text-start">
        <h3 className="inline leading-tight font-semibold text-balance">
          {title}{" "}
          <span className="font-medium text-pretty text-muted-foreground">
            {description}
          </span>
        </h3>
      </CardHeader>

      <CardContent
        className={cn("relative flex overflow-hidden p-0", containerClassName)}
      >
        {fade.includes("right") && (
          <div className="absolute inset-0 z-10 bg-linear-to-e from-transparent via-transparent to-background" />
        )}
        {fade.includes("bottom") && (
          <div className="absolute inset-0 z-10 bg-linear-to-b from-transparent via-transparent to-background" />
        )}
        {fade.includes("top") && (
          <div className="absolute inset-0 z-10 bg-linear-to-t from-transparent via-transparent to-background" />
        )}
        <img
          src={image.src}
          alt={image.alt}
          className={cn(
            "flex-1 rounded-xl border object-cover",
            image.className,
          )}
        />
      </CardContent>
    </Card>
  );
};

export { Feature174 };