import { CheckCircle, Edit, List, MessagesSquare, Timer } from "lucide-react";

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

const capabilities = [
  { label: "کار گروهی", icon: MessagesSquare },
  { label: "همکاری تیمی", icon: Edit },
  { label: "مدیریت پروژه", icon: CheckCircle },
  { label: "هم‌راستایی", icon: List },
  { label: "کار گروهی", icon: Timer },
];

interface Feature87Props {
  className?: string;
}

const Feature87 = ({ className }: Feature87Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
      <div className="pointer-events-none absolute inset-0 z-10 bg-[50%_0] bg-[url('/block-media/shadcnblocks/block/shadow-overlay.png')] bg-no-repeat" />
      <div className="container p-6 md:p-16">
        <div className="grid gap-12 lg:grid-cols-3">
          <div className="flex flex-col justify-between gap-8">
            <div>
              <Badge variant="outline">همکاری تیمی</Badge>
              <h2 className="my-9 text-3xl font-medium md:text-2xll">
                همکاری از راه دور را ساده کنید
                <br />
                <span className="text-muted-foreground">هر عضو بداند چه زمانی چه کاری دارد</span>
              </h2>
              <p className="text-muted-foreground">
                اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
              </p>
            </div>
            <div className="flex flex-col gap-3">
              {capabilities.map((item) => (
                <div key={item.label} className="contents">
                  <div className="flex items-center gap-2 text-muted-foreground">
                    <item.icon className="h-auto w-4 shrink-0" />
                    {item.label}
                  </div>
                  <Separator />
                </div>
              ))}
            </div>
          </div>
          <div className="flex aspect-square w-full items-center justify-center overflow-hidden bg-muted px-6 md:px-8 lg:col-span-2">
            <img
              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
              alt="تقویم تیم"
              className="max-h-[550px] w-full translate-x-1/4 rounded-lg object-cover rtl:-translate-x-1/4"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature87 };