import {
  Blocks,
  Fingerprint,
  LayoutPanelTop,
  MessageCircleMore,
  Users,
  Workflow,
} from "lucide-react";

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

const tabs = [
  {
    title: "بهینه‌سازی محتوا",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    icon: (
      <MessageCircleMore
        className="size-6 text-primary lg:size-8"
        strokeWidth={1.5}
      />
    ),
  },
  {
    title: "تحلیل رقیب",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    icon: (
      <Blocks className="size-6 text-primary lg:size-8" strokeWidth={1.5} />
    ),
  },
  {
    title: "لینک داخلی",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    icon: <Users className="size-6 text-primary lg:size-8" strokeWidth={1.5} />,
  },
  {
    title: "گزارش Core Web Vitals",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    icon: (
      <Workflow className="size-6 text-primary lg:size-8" strokeWidth={1.5} />
    ),
  },
  {
    title: "پیشنهاد عنوان",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    icon: (
      <LayoutPanelTop
        className="size-6 text-primary lg:size-8"
        strokeWidth={1.5}
      />
    ),
  },
  {
    title: "تحلیل کلمه کلیدی",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
    icon: (
      <Fingerprint
        className="size-6 text-primary lg:size-8"
        strokeWidth={1.5}
      />
    ),
  },
];

interface Feature52Props {
  className?: string;
}

const Feature52 = ({ className }: Feature52Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Tabs defaultValue="feature-1">
          <TabsList className="flex h-auto w-full flex-wrap items-stretch justify-between gap-2 bg-background p-0 group-data-horizontal/tabs:h-auto">
            {tabs.map((tab, index) => (
              <TabsTrigger
                key={index}
                value={`feature-${index + 1}`}
                className="flex h-auto min-h-0 min-w-0 flex-1 flex-col items-stretch justify-start gap-2 self-stretch rounded-md border border-border bg-muted px-2 py-4 text-start whitespace-normal text-primary hover:border lg:py-6 group-data-[variant=default]/tabs-list:data-active:border-primary group-data-[variant=default]/tabs-list:data-active:shadow-none"
              >
                <div className="flex w-full flex-1 flex-col items-center justify-center gap-4">
                  {tab.icon}
                  <p className="line-clamp-2 min-h-10 w-full text-center text-sm leading-snug font-semibold text-balance lg:min-h-12 lg:text-base">
                    {tab.title}
                  </p>
                </div>
              </TabsTrigger>
            ))}
          </TabsList>
          {tabs.map((tab, index) => (
            <TabsContent key={index} value={`feature-${index + 1}`}>
              <img
                src={tab.image}
                alt={`نمای ${tab.title}`}
                className="aspect-video w-full rounded-md object-cover"
              />
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </section>
  );
};

export { Feature52 };