import {
  ArrowRight,
  Award,
  Building2,
  HeartHandshake,
  Leaf,
  Lightbulb,
  Trophy,
} from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface ListItem {
  icon: React.ReactNode;
  title: string;
  category: string;
  description: string;
  link: string;
}

interface List2Props {
  heading?: string;
  items?: ListItem[];
  className?: string;
}

const defaultItems: ListItem[] = [
  {
    icon: <Trophy />,
    title: "تقدیر صنعتی",
    category: "دستاورد",
    description: "جایزه عملکرد برجسته.",
    link: "#",
  },
  {
    icon: <Award />,
    title: "جایزه تعالی",
    category: "تقدیر",
    description: "برنده بهترین در دسته.",
    link: "#",
  },
  {
    icon: <Lightbulb />,
    title: "جایزه نوآوری",
    category: "فناوری",
    description: "راهکار پیشرو سال.",
    link: "#",
  },
  {
    icon: <HeartHandshake />,
    title: "موفقیت مشتری",
    category: "خدمات",
    description: "ارائه‌دهنده راهکار با بالاترین امتیاز.",
    link: "#",
  },
  {
    icon: <Building2 />,
    title: "رهبری جهانی",
    category: "مدیریت",
    description: "تیم اجرایی سال.",
    link: "#",
  },
  {
    icon: <Leaf />,
    title: "اثر پایداری",
    category: "محیط‌زیست",
    description: "تعالی در طرح سبز.",
    link: "#",
  },
];

const List2 = ({
  heading = "افتخارات و دستاوردهای ما",
  items = defaultItems,
  className,
}: List2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container px-0 md:px-8">
        <h1 className="mb-10 px-4 text-start text-3xl font-semibold md:mb-14 md:text-xl">
          {heading}
        </h1>
        <div className="flex flex-col">
          <Separator />
          {items.map((item, index) => (
            <React.Fragment key={index}>
              <div className="grid items-center gap-4 px-4 py-5 md:grid-cols-4">
                <div className="order-2 flex items-center gap-2 md:order-none">
                  <span className="flex h-14 w-16 shrink-0 items-center justify-center rounded-md bg-muted">
                    {item.icon}
                  </span>
                  <div className="flex flex-col gap-1 text-start">
                    <h3 className="font-semibold">{item.title}</h3>
                    <p className="text-sm text-muted-foreground">
                      {item.category}
                    </p>
                  </div>
                </div>
                <p className="order-1 text-start text-xl font-semibold md:order-none md:col-span-2">
                  {item.description}
                </p>
                <Button variant="outline" asChild>
                  <a
                    className="order-3 ms-auto w-fit gap-2 md:order-none"
                    href={item.link}
                  >
                    <span>مشاهده پروژه</span>
                    <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                  </a>
                </Button>
              </div>
              <Separator />
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

export { List2 };