reui-blocks/blocks/feature184.tsx

"use client";

import { ChevronUp, Flag, Pyramid, Users, Workflow, Zap } from "lucide-react";
import { useState } from "react";

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

const FEATURES = [
  {
    title: "گزارش‌ساز",
    description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "گزارش‌ساز",
    icon: <Workflow className="size-5 sm:size-6" />,
  },
  {
    title: "Pivot تعاملی",
    description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "تحلیل داده سازمان",
    icon: <Users className="size-5 sm:size-6" />,
  },
  {
    title: "داشبورد مدیریتی",
    description: "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "داشبورد هوش تجاری",
    icon: <Flag className="size-5 sm:size-6" />,
  },
];

interface Feature184Props {
  className?: string;
}

const Feature184 = ({ className }: Feature184Props) => {
  const [activeTab, setActiveTab] = useState(FEATURES[0].title);

  const activeFeature = FEATURES.find((f) => f.title === activeTab);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "w-full max-w-full overflow-x-hidden py-20 md:py-32",
        className,
      )}
    >
      <div className="container mx-auto flex min-w-0 flex-col items-center px-4 sm:px-6 lg:px-8">
        <div className="mb-8 w-full max-w-3xl text-center sm:mb-12">
          <h2 className="text-xl leading-tight font-semibold tracking-tight text-balance sm:text-3xl md:text-xl lg:text-2xll">
            تصمیم استراتژیک را داده‌محور کنید
          </h2>
        </div>

        <div className="grid w-full min-w-0 gap-6 sm:gap-8 lg:grid-cols-2">
          <div className="relative h-[220px] min-w-0 overflow-hidden rounded-xl sm:h-[300px] md:h-[420px]">
            <img
              src={activeFeature?.image}
              alt={activeFeature?.imageAlt ?? activeTab}
              className="h-full w-full max-w-full object-cover"
            />
          </div>

          <div className="relative flex min-w-0 flex-col justify-between">
            <Tabs
              value={activeTab}
              onValueChange={setActiveTab}
              className="h-full w-full min-w-0"
            >
              <TabsList className="flex !h-auto w-full min-w-0 flex-col gap-3 rounded-xl border-none bg-transparent p-0 sm:gap-4">
                {FEATURES.map((feature) => (
                  <TabsTrigger
                    key={feature.title}
                    value={feature.title}
                    className={cn(
                      "group relative flex h-auto w-full min-w-0 flex-col items-stretch rounded-xl p-4 text-start whitespace-normal transition-all sm:p-6",
                      "border border-border/50 bg-card hover:border-primary/50",
                      "data-[state=active]:z-10 data-[state=active]:border-primary data-[state=active]:bg-primary/95 data-[state=active]:shadow-lg",
                      "sm:data-[state=active]:scale-[1.02]",
                    )}
                  >
                    <div className="flex w-full min-w-0 items-start gap-3 sm:items-center sm:justify-between sm:gap-4">
                      <div className="flex min-w-0 flex-1 items-start gap-3 sm:items-center sm:gap-6">
                        <div
                          className={cn(
                            "shrink-0 rounded-lg bg-muted p-2.5 transition-colors sm:p-4",
                            "group-data-[state=active]:bg-background",
                          )}
                        >
                          {feature.icon}
                        </div>
                        <div className="flex min-w-0 flex-col gap-1.5 text-start sm:gap-2">
                          <h3
                            className={cn(
                              "text-base font-medium text-pretty sm:text-xl",
                              "group-data-[state=active]:text-primary-foreground",
                            )}
                          >
                            {feature.title}
                          </h3>
                          <span
                            className={cn(
                              "text-sm text-pretty text-muted-foreground transition-colors",
                              "group-data-[state=active]:text-primary-foreground/90",
                            )}
                          >
                            {feature.description}
                          </span>
                        </div>
                      </div>
                      <div className="shrink-0 pt-1 sm:ps-4 sm:pt-0">
                        <ChevronUp
                          className={cn(
                            "size-5 text-muted-foreground transition-all duration-300",
                            "group-data-[state=active]:rotate-180 group-data-[state=active]:text-primary-foreground",
                          )}
                        />
                      </div>
                    </div>
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
          </div>
        </div>

        <div className="mt-10 flex w-full min-w-0 flex-col items-stretch justify-center gap-3 sm:mt-12 sm:flex-row sm:items-center sm:gap-4">
          <Button className="w-full gap-2 sm:w-auto">
            <Zap className="size-4" />
            شروع کنید
          </Button>
          <Button
            variant="outline"
            className="h-auto w-full gap-2 whitespace-normal px-4 py-2 text-pretty sm:w-auto"
          >
            <Pyramid className="size-4 shrink-0" />
            بیشتر بدانید
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Feature184 };