import type { LucideIcon } from "lucide-react";
import {
  ArrowRight,
  Atom,
  Box,
  GitGraph,
  Hourglass,
  Layout,
  ShieldCheck,
} from "lucide-react";

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

type PanelLink = { href: string; label: string };
type PanelItem = { icon: LucideIcon; text: string };

const panels: {
  id: string;
  title: string;
  description: string;
  links: PanelLink[];
  items: PanelItem[];
  variant: "light" | "dark";
}[] = [
  {
    id: "team-leads",
    title: "مدیریت دارایی",
    description:
      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
    links: [
      { href: "#", label: "یکپارچگی" },
      { href: "#", label: "عملیات" },
    ],
    items: [
      {
        icon: Box,
        text: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
      },
      {
        icon: GitGraph,
        text: "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
      },
      {
        icon: Atom,
        text: "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
      },
    ],
    variant: "light",
  },
  {
    id: "developers",
    title: "ERP",
    description:
      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
    links: [
      { href: "#", label: "ERP" },
      { href: "#", label: "ERP" },
    ],
    items: [
      {
        icon: Hourglass,
        text: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
      },
      {
        icon: Layout,
        text: "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
      },
      {
        icon: ShieldCheck,
        text: "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
      },
    ],
    variant: "dark",
  },
];

interface Feature91Props {
  className?: string;
}

const Feature91 = ({ className }: Feature91Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto grid max-w-7xl gap-y-6 lg:grid-cols-2">
          {panels.map((panel) => (
            <div
              key={panel.id}
              className={cn(
                "rounded-md border p-6 md:p-10",
                panel.variant === "light" &&
                  "lg:rounded-s-md lg:rounded-e-none lg:border-y lg:border-s lg:border-e-0",
                panel.variant === "dark" &&
                  "dark bg-background text-primary lg:rounded-s-none lg:rounded-e-md",
              )}
            >
              <h2 className="mb-6 text-3xl font-semibold md:text-xl">
                {panel.title}
              </h2>
              <p className="mb-6 text-lg text-muted-foreground">
                {panel.description}
              </p>
              <div className="flex flex-col gap-4">
                {panel.links.map((link) => (
                  <a
                    key={link.label}
                    href={link.href}
                    className="flex items-center gap-2 text-lg font-medium"
                  >
                    {link.label}
                    <ArrowRight className="h-auto w-4 rtl:rotate-180" />
                  </a>
                ))}
              </div>
              <div className="mt-10">
                {panel.items.map((item, index) => (
                  <div
                    key={item.text}
                    className={cn(
                      "flex items-center gap-7 py-6",
                      index === 1 &&
                        "border-y border-dashed border-primary",
                    )}
                  >
                    <item.icon className="h-auto w-8 shrink-0" />
                    <p>{item.text}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature91 };