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

interface TabItem {
  id: string;
  title: string;
  value: string;
  summary: string;
  image: {
    src: string;
    alt: string;
  };
}

const LIST: TabItem[] = [
  {
    id: "edit-by-text",
    title: "گزارش‌ساز",
    value: "1",
    summary:
      "داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
      alt: "گزارش‌ساز",
    },
  },
  {
    id: "clear-audio",
    title: "Pivot تعاملی",
    value: "2",
    summary:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-2.svg",
      alt: "تحلیل داده سازمان",
    },
  },
  {
    id: "green-screen",
    title: "داشبورد مدیریتی",
    value: "3",
    summary:
      "داده سازمانی",
    image: {
      src: "/block-media/shadcnblocks/block/placeholder-3.svg",
      alt: "داشبورد هوش تجاری",
    },
  },
];

interface Feature213Props {
  className?: string;
}

const Feature213 = ({ className }: Feature213Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container">
        <div className="mx-auto mb-8 flex max-w-[52.5rem] flex-col items-center justify-between gap-6 md:mb-20">
          <h2 className="text-center text-2xll tracking-tight text-balance text-foreground lg:text-2xll">
            تصمیم استراتژیک را داده‌محور کنید
          </h2>
        </div>
        <div>
          <Tabs
            dir="rtl"
            defaultValue={LIST[0].value}
            className="flex gap-14 xl:!flex-row"
          >
            <TabsList className="!h-fit w-fit flex-col gap-2.5 bg-transparent p-0">
              {LIST.map((item) => (
                <TabsTrigger
                  className="flex-col items-start rounded-[0.75rem] p-5 text-right whitespace-normal data-[state=active]:bg-muted xl:max-w-[34.0625rem]"
                  key={item.id}
                  value={item.value}
                >
                  <div className="leading-normal font-bold">{item.title}</div>
                  <div className="leading-normal text-pretty text-muted-foreground">
                    {item.summary}
                  </div>
                </TabsTrigger>
              ))}
            </TabsList>
            {LIST.map((item) => (
              <TabsContent
                className="w-full"
                key={item.id}
                value={item.value}
              >
                <AspectRatio
                  ratio={16 / 9}
                  className="overflow-hidden rounded-[0.75rem]"
                >
                  <img
                    src={item.image.src}
                    alt={item.image.alt}
                    className="block size-full object-cover object-center"
                  />
                </AspectRatio>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature213 };