import { ChevronRight, SquareDashedMousePointer } from "lucide-react";

import { Card } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const utilities = [
  {
    title: "نقش و دسترسی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    title: "چک‌لیست تحویل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    title: "گزارش پیشرفت",
    description:
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    title: "برد Kanban",
    description:
      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
  {
    title: "تقویم تیمی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
  },
  {
    title: "اشتراک فایل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
  },
];

interface Feature20Props {
  className?: string;
}

const Feature20 = ({ className }: Feature20Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container max-w-7xl">
        <div className="flex items-center justify-between text-sm">
          <div className="flex items-center gap-1 text-muted-foreground">
            <SquareDashedMousePointer className="size-5 text-primary" />
            <p>اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
          </div>
          <a href="#" className="hover:text-primary hover:underline">
            بیشتر بدانید
            <ChevronRight className="ms-2 inline-block size-4 rtl:rotate-180" />
          </a>
        </div>
        <Separator className="mt-3 mb-8" />
        <div className="flex flex-col justify-between gap-6 md:flex-row">
          <h2 className="text-3xl font-medium md:w-1/2">
            همکاری از راه دور را ساده کنید
          </h2>
          <p className="text-muted-foreground md:w-1/2">
            هر عضو بداند چه زمانی چه کاری دارد
          </p>
        </div>
        <div className="mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          {utilities.map((utility, index) => (
            <Card key={index} className="overflow-hidden pt-0">
              <img
                src={utility.image}
                alt={`نمای ${utility.title}`}
                className="aspect-video w-full object-cover"
              />
              <div className="p-5">
                <p className="mb-1 font-medium">{utility.title}</p>
                <p className="text-muted-foreground">{utility.description}</p>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature20 };