"use client";

import { useState } from "react";

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

const integrations = [
  {
    id: "sales",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    title: "تقویم تیمی",
    imageAlt: "تقویم تیم",
  },
  {
    id: "revenue",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    title: "اشتراک فایل",
    imageAlt: "فضای همکاری تیمی",
  },
  {
    id: "plg",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    title: "منشن و بحث",
    imageAlt: "برد مدیریت پروژه",
  },
];

interface Feature164Props {
  className?: string;
}

const Feature164 = ({ className }: Feature164Props) => {
  const [activeTab, setActiveTab] = useState("0");

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col justify-between gap-10 lg:flex-row lg:gap-16">
          <Tabs
            className="lg:w-1/2"
            value={activeTab}
            onValueChange={setActiveTab}
          >
            <div className="mb-8">
              {integrations.map((item, index) => (
                <TabsContent key={item.id} value={index.toString()}>
                  <img
                    src={item.image}
                    className="aspect-square rounded-3xl object-cover"
                    alt={item.imageAlt}
                  />
                </TabsContent>
              ))}
            </div>
            <TabsList className="ml-auto flex h-auto w-fit flex-row items-center gap-2 bg-transparent p-0 group-data-horizontal/tabs:h-auto">
              {integrations.map((item, index) => (
                <TabsTrigger
                  key={item.id}
                  value={index.toString()}
                  className="rounded-xl border border-border px-3 py-2 text-xs data-active:border-primary sm:text-base"
                >
                  {item.title}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
          <div className="flex flex-col justify-center lg:w-1/2 lg:items-start lg:ps-4">
            <div className="max-w-md text-start">
              <h1 className="mb-4 text-3xl font-semibold text-balance sm:text-2xll">
                <span className="text-muted-foreground/50">همکاری از راه دور را ساده کنید</span>{" "}
                گزارش‌دهی پویا.
              </h1>
              <p className="mb-6 text-xl text-pretty">
                اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
              </p>
              <Button>بیشتر بدانید</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature164 };