import { ChevronRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const cards = [
  {
    title: "پاسخ آماده",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "مدیریت تیکت",
  },
  {
    title: "SLA هوشمند",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "داشبورد رضایت",
  },
  {
    title: "نظرسنجی رضایت",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "مرکز پشتیبانی مشتری",
  },
];

interface Feature112Props {
  className?: string;
}

const Feature112 = ({ className }: Feature112Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-xl flex-col items-center gap-5 text-center">
          <Badge variant="outline">زمان حل مسئله را کوتاه کنید</Badge>
          <h2 className="text-3xl font-semibold md:text-2xll">
            کیفیت پاسخگویی را قابل اندازه‌گیری کنید
          </h2>
          <p className="text-muted-foreground md:text-lg">
            تیم پشتیبانی را هوشمندتر کنید
          </p>
          <a
            href="#"
            className="flex items-center gap-1 text-sm font-medium md:text-base"
          >
            تیکت
            <ChevronRight className="h-auto w-4 rtl:rotate-180" />
          </a>
        </div>
        <div className="mt-20 grid gap-6 md:grid-cols-3 lg:gap-10">
          {cards.map((card) => (
            <div key={card.title} className="flex flex-col rounded-lg border">
              <img
                src={card.image}
                alt={card.imageAlt}
                className="aspect-video size-full rounded-t-lg object-cover"
              />
              <div className="p-6">
                <h3 className="mb-2.5 font-semibold md:text-xl">{card.title}</h3>
                <a href="#" className="flex items-center gap-1 text-sm">
                  بیشتر بدانید
                  <ChevronRight className="h-auto w-4 rtl:rotate-180" />
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature112 };