import type { ReactNode } from "react";
import { Cog, Lightbulb, ListChecks } from "lucide-react";

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

interface Feature {
  id: string;
  icon: ReactNode;
  heading: string;
  description: string;
  image: string;
  imageAlt: string;
  url: string;
  isDefault: boolean;
}

const defaultFeatures: Feature[] = [
  {
    id: "feature-1",
    heading: "موجودی انبار",
    icon: <Lightbulb className="size-4" />,
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "مدیریت سفارش",
    url: "https://ShadcnBlocks",
    isDefault: true,
  },
  {
    id: "feature-2",
    icon: <ListChecks className="size-4" />,
    heading: "بازگشت مشتری",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "داشبورد فروش",
    url: "https://ShadcnBlocks",
    isDefault: false,
  },
  {
    id: "feature-3",
    icon: <Cog className="size-4" />,
    heading: "صفحه فرود",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پنل فروشگاه آنلاین",
    url: "https://ShadcnBlocks",
    isDefault: false,
  },
];

interface Feature51Props {
  features?: Feature[];
  className?: string;
}

const Feature51 = ({
  features = defaultFeatures,
  className,
}: Feature51Props) => {
  const defaultTab =
    features.find((tab) => tab.isDefault)?.id || features[0].id;

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Tabs defaultValue={defaultTab} className="p-0" dir="rtl">
          <TabsList className="flex w-full flex-col gap-2 bg-background p-0 group-data-horizontal/tabs:h-auto md:flex-row">
            {features.map((tab) => (
              <TabsTrigger
                key={tab.id}
                value={tab.id}
                aria-label={tab.heading}
                className="group flex w-full flex-col items-start justify-start gap-1 rounded-md border border-border p-4 text-start whitespace-normal shadow-none transition-opacity duration-200 hover:border group-data-[variant=default]/tabs-list:data-active:border-primary group-data-[variant=default]/tabs-list:data-active:shadow-none"
              >
                <div className="flex items-center gap-2 md:flex-col md:items-start lg:gap-4">
                  {tab.icon && (
                    <span className="flex size-8 items-center justify-center rounded-full bg-muted text-muted-foreground lg:size-10">
                      {tab.icon}
                    </span>
                  )}
                  <p className="text-lg font-semibold transition-opacity duration-200">
                    {tab.heading}
                  </p>
                </div>
                <p className="font-normal text-muted-foreground transition-opacity duration-200 md:block">
                  {tab.description}
                </p>
              </TabsTrigger>
            ))}
          </TabsList>
          {features.map((tab) => (
            <TabsContent
              key={tab.id}
              value={tab.id}
              className="transition-opacity duration-300"
            >
              <img
                src={tab.image}
                alt={tab.imageAlt}
                className="aspect-video w-full rounded-md border border-border object-cover transition-opacity duration-300"
              />
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </section>
  );
};

export { Feature51 };