"use client";

import { useState } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

const tabsData = [
  {
    id: 1,
    title: "پروفایل ۳۶۰ درجه مشتری",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    description:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
  },
  {
    id: 2,
    title: "اتوماسیون مراحل فروش",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    description:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
  },
  {
    id: 3,
    title: "پیش‌بینی درآمد",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
    description:
      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
  },
];

interface Feature131Props {
  className?: string;
}

const Feature131 = ({ className }: Feature131Props) => {
  const [activeTabId, setActiveTabId] = useState<number>(1);
  const [activeImage, setActiveImage] = useState<string>(tabsData[0].imageSrc);
  const activeTab =
    tabsData.find((tab) => tab.id === activeTabId) ?? tabsData[0];

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-16 md:py-24 lg:py-32", className)}
    >
      <div className="container">
        <div className="flex w-full flex-col items-start justify-between gap-8 md:flex-row lg:gap-16">
          <div className="w-full md:max-w-[400px]">
            <h2 className="mb-8 text-start text-3xl font-semibold tracking-tight md:mb-12 md:text-xl">
              هر سرنخ را تا قرارداد دنبال کنید
            </h2>
            <Accordion
              type="single"
              defaultValue="item-1"
              className="w-full"
              onValueChange={(value) => {
                const id = parseInt(value.split("-")[1]);
                setActiveTabId(id);
                setActiveImage(
                  tabsData.find((tab) => tab.id === id)?.imageSrc ??
                    tabsData[0].imageSrc,
                );
              }}
            >
              {tabsData.map((tab) => (
                <AccordionItem
                  key={tab.id}
                  value={`item-${tab.id}`}
                  className={cn(
                    "border-t-2 border-b-0 px-2 transition-all duration-300",
                    tab.id === activeTabId
                      ? "border-primary bg-accent/40"
                      : "border-muted hover:bg-accent/20",
                  )}
                >
                  <AccordionTrigger className="cursor-pointer py-5 text-start no-underline! transition-all">
                    <h6
                      className={cn(
                        "text-xl font-semibold transition-colors duration-300",
                        tab.id === activeTabId
                          ? "text-primary"
                          : "text-muted-foreground",
                      )}
                    >
                      {tab.title}
                    </h6>
                  </AccordionTrigger>
                  <AccordionContent className="animate-accordion-down">
                    <p className="mt-3 text-start leading-relaxed text-muted-foreground">
                      {tab.description}
                    </p>
                    <div className="mt-6 md:hidden">
                      <img
                        src={tab.imageSrc}
                        alt={`نمای ${tab.title}`}
                        className="h-full max-h-80 w-full rounded-md object-cover transition-transform duration-300"
                      />
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
          <div className="relative hidden w-full overflow-hidden rounded-md bg-accent/30 md:block">
            <div className="pointer-events-none absolute inset-0 bg-linear-to-bl from-primary/5 to-transparent" />
            <div className="pt-12 ps-12">
              <img
                src={activeImage}
                alt={`نمای ${activeTab.title}`}
                className="max-h-[490px] w-full rounded-ts-md object-cover transition-all duration-500 ease-in-out"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature131 };