import type { LucideIcon } from "lucide-react";
import {
  CheckIcon,
  HeadphonesIcon,
  PuzzleIcon,
  ShieldCheckIcon,
} from "lucide-react";

import { cn } from "@/lib/utils";

interface FeatureGroup {
  id: string;
  title: string;
  icon: LucideIcon;
  features: { id: string; label: string }[];
}

const FEATURE_GROUPS: FeatureGroup[] = [
  {
    id: "security",
    title: "نقش و دسترسی",
    icon: ShieldCheckIcon,
    features: [
      { id: "two-factor", label: "کار گروهی" },
      { id: "encryption", label: "همکاری تیمی" },
      { id: "audits", label: "مدیریت پروژه" },
      { id: "rbac", label: "هم‌راستایی" },
      { id: "backup", label: "کار گروهی" },
    ],
  },
  {
    id: "integration",
    title: "چک‌لیست تحویل",
    icon: PuzzleIcon,
    features: [
      { id: "rest-api", label: "همکاری تیمی" },
      { id: "webhook", label: "مدیریت پروژه" },
      { id: "third-party", label: "هم‌راستایی" },
      { id: "custom-endpoints", label: "کار گروهی" },
      { id: "docs", label: "همکاری تیمی" },
    ],
  },
  {
    id: "support",
    title: "گزارش پیشرفت",
    icon: HeadphonesIcon,
    features: [
      { id: "email-support", label: "مدیریت پروژه" },
      { id: "tutorials", label: "هم‌راستایی" },
      { id: "knowledge-base", label: "کار گروهی" },
      { id: "forums", label: "همکاری تیمی" },
      { id: "webinars", label: "مدیریت پروژه" },
    ],
  },
];

interface Feature229Props {
  className?: string;
}

const Feature229 = ({ className }: Feature229Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="max-w-5xl text-start text-xl text-balance md:text-2xll">
          همکاری از راه دور را ساده کنید
        </h2>
        <div className="mt-16 grid gap-16 md:mt-20 md:grid-cols-3 md:gap-6">
          {FEATURE_GROUPS.map((group) => (
            <div key={group.id} className="text-start">
              <span className="flex size-12 items-center justify-center rounded-xl bg-muted">
                <group.icon className="size-5" />
              </span>
              <h3 className="my-6 font-semibold">{group.title}</h3>
              <ul className="space-y-4">
                {group.features.map((feature) => (
                  <li
                    key={feature.id}
                    className="flex items-center gap-2 text-pretty"
                  >
                    <CheckIcon className="size-4 shrink-0" />
                    {feature.label}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature229 };