reui-blocks/blocks/feature160.tsx

"use client";

import { Code, GitBranch, List, WandSparkles } from "lucide-react";
import { useState } from "react";

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

const integrations = [
  {
    id: "build",
    image:
      "/block-media/shadcnblocks/block/photos/tim-van-der-kuip-CPs2X8JYmS8-unsplash.jpg",
    logo: <Code strokeWidth={1} className="h-5 w-5" />,
    title: "لاگ اجرا",
    description:
      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    imageAlt: "سازنده گردش‌کار",
  },
  {
    id: "refine",
    image:
      "/block-media/shadcnblocks/block/photos/vitaly-gariev-y7xUr3aDLXc-unsplash.jpg",
    logo: <GitBranch strokeWidth={1} className="h-5 w-5" />,
    title: "قالب آماده",
    description:
      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
    imageAlt: "نمای اتوماسیون فرایند",
  },
  {
    id: "work",
    image:
      "/block-media/shadcnblocks/block/photos/annie-spratt-hCb3lIB8L8E-unsplash.jpg",
    logo: <List strokeWidth={1} className="h-5 w-5" />,
    title: "اتصال ابزار",
    description:
      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
    imageAlt: "لاگ اجرای خودکار",
  },
  {
    id: "report",
    image:
      "/block-media/shadcnblocks/block/photos/akson-1K8pIbIrhkQ-unsplash.jpg",
    logo: <WandSparkles strokeWidth={1} className="h-5 w-5" />,
    title: "سازنده گردش‌کار",
    description:
      "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
    imageAlt: "سازنده گردش‌کار",
  },
];

interface Feature160Props {
  className?: string;
}

const Feature160 = ({ className }: Feature160Props) => {
  const [cardNumber, setCardNumber] = useState(0);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-20 max-w-lg text-right">
          <h1 className="mb-4 text-2xll font-bold text-balance lg:text-[52px]">
            فرایندها را استاندارد و سریع کنید
          </h1>
          <h3 className="text-xl text-pretty">
            اتوماسیون را در کل سازمان یکپارچه کنید
          </h3>
        </div>
        <Tabs
          dir="rtl"
          className="rounded-3xl border border-gray-200 px-5 pt-4 sm:px-10 sm:pt-9"
          defaultValue="0"
        >
          <TabsList className="mb-14 grid !h-full grid-cols-1 gap-x-8 gap-y-6 bg-transparent p-0 md:grid-cols-2 lg:grid-cols-4">
            {integrations.map((item, index) => (
              <TabsTrigger
                key={item.id}
                value={index.toString()}
                onClick={() => setCardNumber(index)}
                className={cn(
                  "block cursor-pointer border-0 text-right whitespace-normal transition-all duration-500 hover:opacity-80 data-[state=active]:shadow-none!",
                  index === cardNumber ? "opacity-100" : "opacity-50",
                )}
              >
                <div className="mb-2 flex items-center gap-2">
                  {item.logo}
                  <h4 className="text-lg font-semibold">{item.title}</h4>
                </div>
                <p className="text-right text-base font-medium text-pretty">
                  {item.description}
                </p>
              </TabsTrigger>
            ))}
          </TabsList>
          <div className="rounded-t-[28px] p-1 pb-0">
            {integrations.map((item, index) => (
              <TabsContent
                value={index.toString()}
                key={item.id}
                className="m-0"
              >
                <img
                  src={item.image}
                  alt={item.imageAlt}
                  className="h-full max-h-[400px] w-full rounded-t-[28px] object-cover object-bottom transition-all duration-500"
                />
              </TabsContent>
            ))}
          </div>
        </Tabs>
      </div>
    </section>
  );
};

export { Feature160 };