reui-blocks/blocks/feature113.tsx

import {
  CreditCard,
  Layout,
  Menu,
  Pointer,
  Zap,
  type LucideIcon,
} from "lucide-react";

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

const tabs: {
  value: string;
  label: string;
  icon: LucideIcon;
  content: {
    badge: string;
    title: string;
    description: string;
    buttonText: string;
    buttonIcon: LucideIcon;
    image: string;
    imageAlt: string;
  };
}[] = [
  {
    value: "tab-1",
    label: "اتوماسیون AI",
    icon: Zap,
    content: {
      badge: "دستیار کسب‌وکار",
      title: "طبقه‌بندی خودکار",
      description:
        "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
      buttonText: "پیش‌بینی ریزش",
      buttonIcon: CreditCard,
      image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
      imageAlt: "دستیار هوش مصنوعی",
    },
  },
  {
    value: "tab-2",
    label: "هوش مصنوعی",
    icon: Pointer,
    content: {
      badge: "پیشنهاد هوشمند",
      title: "پیش‌بینی ریزش",
      description:
        "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
      buttonText: "پیشنهاد هوشمند",
      buttonIcon: Menu,
      image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
      imageAlt: "پیشنهادهای هوشمند",
    },
  },
  {
    value: "tab-3",
    label: "پیشرفته",
    icon: Layout,
    content: {
      badge: "اتوماسیون AI",
      title: "جستجوی معنایی",
      description:
        "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
      buttonText: "اتوماسیون AI",
      buttonIcon: Zap,
      image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
      imageAlt: "تحلیل با AI",
    },
  },
];

interface Feature113Props {
  className?: string;
}

const Feature113 = ({ className }: Feature113Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div>
        <div className="container flex flex-col items-center gap-4 text-center">
          <Badge variant="outline">دستیار کسب‌وکار</Badge>
          <h2 className="text-3xl font-semibold md:text-xl">با هوش مصنوعی سریع‌تر تصمیم بگیرید</h2>
          <p className="text-muted-foreground">
            کارهای تکراری را به AI بسپارید
          </p>
        </div>
        <div>
          <Tabs dir="rtl" defaultValue="tab-1" className="mt-14">
            <div dir="rtl" className="container flex justify-center">
              <TabsList>
                {tabs.map((tab) => (
                  <TabsTrigger
                    key={tab.value}
                    value={tab.value}
                    className="flex items-center gap-2"
                  >
                    <tab.icon className="hidden h-auto w-4 shrink-0 sm:block" />
                    {tab.label}
                  </TabsTrigger>
                ))}
              </TabsList>
            </div>
            <div className="container mt-10 max-w-7xl rounded-2xl bg-muted/70 p-8 md:mt-14 lg:p-16">
              {tabs.map((tab) => (
                <TabsContent
                  key={tab.value}
                  value={tab.value}
                  dir="rtl"
                  className="mt-0 grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10"
                >
                  <div className="flex flex-col items-start gap-5 text-right">
                    <Badge variant="outline" className="w-fit bg-background">
                      {tab.content.badge}
                    </Badge>
                    <h3 className="text-3xl font-semibold lg:text-2xll">
                      {tab.content.title}
                    </h3>
                    <p className="text-muted-foreground lg:text-lg">
                      {tab.content.description}
                    </p>
                    <Button className="mt-2.5 w-fit gap-2" size="lg">
                      {tab.content.buttonText}
                      <tab.content.buttonIcon className="h-auto w-4" />
                    </Button>
                  </div>
                  <img
                    src={tab.content.image}
                    alt={tab.content.imageAlt}
                    className="max-h-96 rounded-xl"
                  />
                </TabsContent>
              ))}
            </div>
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature113 };