"use client";

import { useState } from "react";

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

const tabs = [
  {
    id: 1,
    tabName: "یکپارچگی",
    tabDescription:
      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
    link: "#",
    image: "/block-media/shadcnblocks/block/block-1.svg",
  },
  {
    id: 2,
    tabName: "عملیات",
    tabDescription:
      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
    link: "#",
    image: "/block-media/shadcnblocks/block/block-2.svg",
  },
  {
    id: 3,
    tabName: "مدیریت سازمان",
    tabDescription:
      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
    link: "#",
    image: "/block-media/shadcnblocks/block/block-3.svg",
  },
  {
    id: 4,
    tabName: "ERP",
    tabDescription:
      "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
    link: "#",
    image: "/block-media/shadcnblocks/block/block-4.svg",
  },
];

interface Feature129Props {
  className?: string;
}

const Feature129 = ({ className }: Feature129Props) => {
  const [activeTab, setActiveTab] = useState("4");

  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-6">
          <h2 className="text-center text-xl font-semibold tracking-tight text-balance md:mb-4 md:text-2xll">
            عملیات سازمان را یکپارچه کنید
          </h2>
          <p className="text-center text-lg text-pretty text-muted-foreground md:text-xl">
            گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
          </p>
        </div>
        <div className="mt-12">
          <Tabs
            defaultValue="4"
            className="mx-auto flex w-full flex-col items-center gap-8"
            value={activeTab}
            onValueChange={setActiveTab}
          >
            <TabsList className="flex !h-auto flex-wrap">
              {tabs.map((tab) => (
                <TabsTrigger
                  key={tab.id}
                  value={tab.id.toString()}
                  className={cn(
                    "border border-solid border-transparent px-4 py-2 text-sm font-semibold transition",
                    activeTab === tab.id.toString() &&
                      "border border-solid border-border shadow-sm",
                  )}
                >
                  {tab.tabName}
                </TabsTrigger>
              ))}
            </TabsList>
            {tabs.map((tab) => (
              <TabsContent
                value={tab.id.toString()}
                key={tab.id}
                className="mt-0 w-full overflow-hidden rounded-2xl bg-accent px-14 pt-6 md:px-20 md:pt-8"
              >
                <div className="flex flex-col justify-between">
                  <div className="mb-8 flex flex-col items-center justify-center gap-2 md:flex-row">
                    <p className="text-center text-sm md:text-right">
                      {tab.tabDescription}
                    </p>
                    <a
                      href={tab.link}
                      className="border-b-2 border-solid border-border text-sm font-semibold whitespace-nowrap"
                    >
                      بیشتر بدانید
                    </a>
                  </div>

                  <div className="flex w-full items-center justify-center rounded-t-2xl bg-background">
                    <img
                      src={tab.image}
                      alt={`لوگوی ${tab.tabName}`}
                      className="order-first w-full max-w-52 object-contain px-4 py-8 md:order-last md:max-w-64"
                    />
                  </div>
                </div>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature129 };