import { ChevronRight } from "lucide-react";

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

interface DashedLineProps {
  orientation?: "horizontal" | "vertical";
  className?: string;
}

const DashedLine = ({
  orientation = "horizontal",
  className,
}: DashedLineProps) => {
  const isHorizontal = orientation === "horizontal";

  return (
    <div
      className={cn(
        "relative text-muted-foreground",
        isHorizontal ? "h-px w-full" : "h-full w-px",
        className,
      )}
    >
      <div
        className={cn(
          isHorizontal
            ? [
                "h-px w-full",
                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
              ]
            : [
                "h-full w-px",
                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
              ],
        )}
      />
    </div>
  );
};

interface FeatureItem {
  id: string;
  title: string;
  image: string;
  imageAlt?: string;
  href?: string;
}

const DEFAULT_ITEMS: FeatureItem[] = [
  {
    id: "product-development",
    title: "مدیریت محصول",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "مدیریت سفارش",
    href: "#",
  },
  {
    id: "end-to-end",
    title: "پرداخت امن",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "داشبورد فروش",
    href: "#",
  },
  {
    id: "momentum",
    title: "ردیابی سفارش",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پنل فروشگاه آنلاین",
    href: "#",
  },
];

interface Feature342Props {
  tagline?: string;
  heading?: string;
  description?: string;
  items?: FeatureItem[];
  className?: string;
}

const Feature342 = ({
  tagline = "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
  heading = "فروش آنلاین را مقیاس‌پذیر کنید",
  description = "مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.",
  items = DEFAULT_ITEMS,
  className,
}: Feature342Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("pb-28 lg:pb-32", className)}>
      <div className="container">
        <div className="relative flex items-center justify-center">
          <DashedLine className="text-muted-foreground" />
          <span className="absolute bg-muted px-3 font-mono text-sm font-medium tracking-wide text-muted-foreground max-md:hidden">
            {tagline}
          </span>
        </div>

        <div className="mx-auto mt-10 grid max-w-4xl items-center gap-3 text-start md:gap-0 lg:mt-24 lg:grid-cols-2">
          <h2 className="text-xl tracking-tight text-balance md:text-xl lg:text-2xll">
            {heading}
          </h2>
          <p className="leading-snug text-pretty text-muted-foreground">
            {description}
          </p>
        </div>

        <Card className="mt-8 rounded-3xl md:mt-12 lg:mt-20">
          <CardContent className="flex p-0 max-md:flex-col">
            {items.map((item, i) => (
              <div key={item.id} className="flex flex-1 max-md:flex-col">
                <div className="flex-1 p-4 pe-0 md:p-6">
                  <div className="relative aspect-[1.28/1] overflow-hidden">
                    <img
                      src={item.image}
                      alt={item.imageAlt ?? `${item.title} - نمای رابط کاربری`}
                      className="absolute inset-0 size-full object-cover object-start-top ps-4 pt-2"
                    />
                    <div className="absolute inset-0 z-10 bg-linear-to-t from-background via-transparent to-transparent" />
                  </div>

                  <a
                    href={item.href || "#"}
                    className="group flex items-center justify-between gap-4 pe-4 pt-4 md:pe-6 md:pt-6"
                  >
                    <h3 className="max-w-60 text-xl leading-tight font-bold tracking-tight text-pretty">
                      {item.title}
                    </h3>
                    <div className="rounded-full border p-2">
                      <ChevronRight className="size-6 shrink-0 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:size-9" />
                    </div>
                  </a>
                </div>
                {i < items.length - 1 && (
                  <div className="relative hidden md:block">
                    <DashedLine orientation="vertical" />
                  </div>
                )}
                {i < items.length - 1 && (
                  <div className="relative block md:hidden">
                    <DashedLine orientation="horizontal" />
                  </div>
                )}
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export { Feature342 };