import {
  FileSpreadsheet,
  Flag,
  Layout,
  type LucideIcon,
  MessagesSquare,
  Settings,
  Target,
  Timer,
  Wand,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

const TABS = [
  {
    label: "یکپارچگی",
    icon: Target,
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    label: "عملیات",
    icon: Layout,
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    label: "مدیریت سازمان",
    icon: Wand,
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    label: "ERP",
    icon: FileSpreadsheet,
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
  {
    label: "ERP",
    icon: Timer,
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
  },
  {
    label: "ERP",
    icon: MessagesSquare,
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
  },
  {
    label: "ERP",
    icon: Settings,
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
] satisfies { icon: LucideIcon; label: string; image: string }[];

const DEFAULT_TAB = TABS.findIndex((tab) => tab.label === "ERP").toString();

interface Feature105Props {
  className?: string;
}

const Feature105 = ({ className }: Feature105Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4">
          <Badge
            variant="outline"
            className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
          >
            <Flag className="h-auto w-4" />
            ERP
          </Badge>
          <h2 className="text-center text-3xl font-semibold tracking-tight text-balance lg:text-xl">
            عملیات سازمان را یکپارچه کنید
          </h2>
          <p className="text-center text-pretty text-muted-foreground lg:text-lg">
            گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
          </p>
        </div>
        <div className="mx-auto mt-14 max-w-7xl">
          <Tabs defaultValue={DEFAULT_TAB}>
            <div className="max-w-[100vw-4rem] overflow-x-auto overflow-y-hidden">
              <TabsList
                variant="line"
                className="!h-auto w-full justify-start gap-0 rounded-none border-b border-border bg-transparent p-0"
              >
                {TABS.map(({ icon: Icon, label }, index) => (
                  <TabsTrigger
                    key={label}
                    value={index.toString()}
                    className="group -mb-px flex flex-col items-center justify-start gap-1.5 rounded-none border-0 bg-transparent px-1 pb-3.5 shadow-none ring-0 data-[state=active]:after:opacity-100"
                  >
                    <span className="flex size-12 items-center justify-center rounded-md bg-muted transition-colors duration-300 group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground">
                      <Icon className="size-6" />
                    </span>
                    <p className="text-sm text-muted-foreground">{label}</p>
                  </TabsTrigger>
                ))}
              </TabsList>
            </div>
            <div className="mt-5">
              {TABS.map(({ image, label }, index) => (
                <TabsContent
                  key={label}
                  value={index.toString()}
                  className="aspect-video"
                >
                  <img
                    src={image}
                    alt={`نمای ${label}`}
                    className="h-full w-full rounded-xl border object-cover"
                  />
                </TabsContent>
              ))}
            </div>
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature105 };