import {
  BarChart,
  Bell,
  Bot,
  Check,
  List,
  MessageCircleOff,
  MessageSquare,
  Target,
  Users,
  X,
} from "lucide-react";

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

const withoutItems = [
  {
    icon: Users,
    text: "فیلتر بر اساس مسئول",
  },
  {
    icon: MessageSquare,
    text: "پیوست چندرسانه‌ای",
  },
  {
    icon: MessageCircleOff,
    text: "قالب پروژه آماده",
  },
  {
    icon: List,
    text: "اولویت‌بندی کار",
  },
];

const withItems = [
  {
    icon: Target,
    text: "گزارش بار کاری",
  },
  {
    icon: Bot,
    text: "اعلان تغییر وضعیت",
  },
  {
    icon: Bell,
    text: "فیلتر بر اساس مسئول",
  },
  {
    icon: BarChart,
    text: "پیوست چندرسانه‌ای",
  },
];

interface Feature180Props {
  className?: string;
}

const Feature180 = ({ className }: Feature180Props) => {
  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 pb-20 text-center">
          <Badge variant="outline">کار گروهی</Badge>
          <h1 className="text-3xl font-medium text-pretty md:text-2xll">
            همکاری از راه دور را ساده کنید
          </h1>
          <p className="text-pretty text-muted-foreground">
            هر عضو بداند چه زمانی چه کاری دارد
          </p>
        </div>
        <div className="grid gap-8 md:grid-cols-2 md:gap-5">
          <div className="flex flex-col items-center gap-5 md:gap-9">
            <div className="flex items-center gap-3">
              <X className="h-6 text-red-400" />
              <p className="text-xl font-medium">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
            </div>
            <div className="h-full w-full rounded-md border p-9">
              <ul className="flex flex-col gap-8 text-start font-medium text-primary/70">
                {withoutItems.map((item) => (
                  <li key={item.text} className="flex items-start gap-4">
                    <item.icon className="h-6 shrink-0" />
                    <p className="text-pretty">{item.text}</p>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div className="flex flex-col items-center gap-5 md:gap-9">
            <div className="flex items-center gap-3">
              <Check className="h-6 text-lime-400" />
              <p className="text-xl font-medium">وظایف، فایل‌ها و گفتگوها در یک محیط کاری متمرکز می‌شود. تیم‌ها کمتر در پیگیری وضعیت وقت می‌گذارند و بیشتر روی تحویل تمرکز می‌کنند.</p>
            </div>
            <div className="w-full rounded-md bg-linear-to-br from-primary via-primary/20 via-30% to-primary p-0.5">
              <div className="rounded-sm bg-background p-9">
                <ul className="flex flex-col gap-8 text-start font-medium">
                  {withItems.map((item) => (
                    <li key={item.text} className="flex items-start gap-4">
                      <item.icon className="h-6 shrink-0" />
                      <p className="text-pretty">{item.text}</p>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature180 };