import { ArrowRight } from "lucide-react";

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

interface Feature {
  id: string;
  heading: string;
  description: string;
  image: string;
  url: string;
}

interface Feature72Props {
  title: string;
  description?: string;
  buttonUrl?: string;
  buttonText?: string;
  features?: Feature[];
  className?: string;
}

const Feature72 = ({
  title = "زمان حل مسئله را کوتاه کنید",
  description = "پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.",
  buttonUrl = "https://ShadcnBlocks",
  buttonText = "رضایت مشتری",
  features = [
    {
      id: "feature-1",
      heading: "تاریخچه مشتری",
      description:
        "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
      image: "/block-media/shadcnblocks/block/placeholder-1.svg",
      url: "https://ShadcnBlocks",
    },
    {
      id: "feature-2",
      heading: "صندوق یکپارچه",
      description:
        "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
      image: "/block-media/shadcnblocks/block/placeholder-2.svg",
      url: "https://ShadcnBlocks",
    },
    {
      id: "feature-3",
      heading: "اولویت‌بندی تیکت",
      description:
        "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
      image: "/block-media/shadcnblocks/block/placeholder-3.svg",
      url: "https://ShadcnBlocks",
    },
    {
      id: "feature-4",
      heading: "پایگاه دانش",
      description:
        "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
      image: "/block-media/shadcnblocks/block/placeholder-4.svg",
      url: "https://ShadcnBlocks",
    },
  ],
  className,
}: Feature72Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-8 lg:max-w-sm">
          <h2 className="mb-3 text-3xl font-semibold md:mb-4 md:text-xl lg:mb-6">
            {title}
          </h2>
          {description && (
            <p className="mb-8 text-muted-foreground lg:text-lg">
              {description}
            </p>
          )}
          {buttonUrl && (
            <Button variant="link" asChild>
              <a
                href={buttonUrl}
                className="group flex items-center gap-2 font-medium md:text-base lg:text-lg"
              >
                {buttonText}
                <ArrowRight className="size-4 rtl:rotate-180" />
              </a>
            </Button>
          )}
        </div>
        <div className="grid gap-6 md:grid-cols-2 lg:gap-8">
          {features.map((feature) => (
            <div
              key={feature.id}
              className="flex flex-col overflow-clip rounded-xl border border-border"
            >
              <a href={feature.url}>
                <img
                  src={feature.image}
                  alt={`نمای ${feature.heading}`}
                  className="aspect-16/9 h-full w-full object-cover object-center transition-opacity hover:opacity-80"
                />
              </a>
              <div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
                <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
                  {feature.heading}
                </h3>
                <p className="text-muted-foreground lg:text-lg">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature72 };