import { Layout, Pointer, Zap, type LucideIcon } from "lucide-react";

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

interface TabContent {
  badge: string;
  title: string;
  description: string;
  buttonText: string;
  imageSrc: string;
  imageAlt: string;
}

interface Tab {
  value: string;
  icon: LucideIcon;
  label: string;
  content: TabContent;
}

interface Feature108Props {
  badge?: string;
  heading?: string;
  description?: string;
  tabs?: Tab[];
  className?: string;
}

const Feature108 = ({
  badge = "افزایش فروش",
  heading = "پیش‌بینی درآمد را دقیق‌تر کنید",
  description = "با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.",
  tabs = [
    {
      value: "tab-1",
      icon: Zap,
      label: "تیم فروش",
      content: {
        badge: "بستن معامله",
        title: "همکاری فروش و بازاریابی",
        description:
          "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
        buttonText: "بستن معامله",
        imageSrc:
          "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
        imageAlt: "صف اولویت سرنخ‌ها",
      },
    },
    {
      value: "tab-2",
      icon: Pointer,
      label: "رشد درآمد",
      content: {
        badge: "افزایش فروش",
        title: "اولویت‌بندی سرنخ",
        description:
          "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
        buttonText: "قالب پیشنهاد فروش",
        imageSrc:
          "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
        imageAlt: "داشبورد عملکرد فروش",
      },
    },
    {
      value: "tab-3",
      icon: Layout,
      label: "تیم فروش",
      content: {
        badge: "بستن معامله",
        title: "قالب پیشنهاد فروش",
        description:
          "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
        buttonText: "بستن معامله",
        imageSrc:
          "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
        imageAlt: "نمودار نرخ تبدیل",
      },
    },
  ],
  className,
}: Feature108Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto">
        <div className="flex flex-col items-center gap-4 text-center">
          <Badge variant="outline">{badge}</Badge>
          <h1 className="max-w-2xl text-3xl font-semibold md:text-xl">
            {heading}
          </h1>
          <p className="text-muted-foreground">{description}</p>
        </div>
        <Tabs
          dir="rtl"
          defaultValue={
            tabs.find((tab) => tab.label === "رشد درآمد")?.value ??
            tabs[0].value
          }
          className="mt-8"
        >
          <div
            dir="rtl"
            className="flex justify-center overflow-x-auto overflow-y-hidden"
          >
            <TabsList className="container">
              {tabs.map((tab) => (
                <TabsTrigger key={tab.value} value={tab.value} className="">
                  <tab.icon className="h-auto w-4 shrink-0" /> {tab.label}
                </TabsTrigger>
              ))}
            </TabsList>
          </div>
          <div className="mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16">
            <div className="relative">
              {tabs.map((tab) => (
                <TabsContent
                  key={tab.value}
                  value={tab.value}
                  dir="rtl"
                  className="grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10"
                >
                  <div className="flex flex-col items-start gap-5 text-right">
                    <Badge variant="outline" className="w-fit bg-background">
                      {tab.content.badge}
                    </Badge>
                    <h3 className="text-3xl font-semibold lg:text-2xll">
                      {tab.content.title}
                    </h3>
                    <p className="text-muted-foreground lg:text-lg">
                      {tab.content.description}
                    </p>
                    <Button className="mt-2.5 w-fit gap-2" size="lg">
                      {tab.content.buttonText}
                    </Button>
                  </div>
                  <div className="relative h-[300px] w-full lg:h-[400px]">
                    <img
                      src={tab.content.imageSrc}
                      alt={tab.content.imageAlt}
                      className="h-full w-full rounded-xl object-cover"
                      width={600}
                      height={400}
                    />
                  </div>
                </TabsContent>
              ))}
            </div>
          </div>
        </Tabs>
      </div>
    </section>
  );
};

export { Feature108 };