reui-blocks/blocks/feature197.tsx

"use client";

import { useState } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

interface FeatureItem {
  id: number;
  title: string;
  image: string;
  imageAlt: string;
  description: string;
}

const DEFAULT_FEATURES: FeatureItem[] = [
  {
    id: 1,
    title: "مدیریت دارایی",
    image: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
    imageAlt: "گزارش مالی یکپارچه",
    description:
      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
  },
  {
    id: 2,
    title: "بودجه‌بندی",
    image: "/block-media/shadcnblocks/block/lummi/bw15.jpeg",
    imageAlt: "داشبورد ERP",
    description:
      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
  },
  {
    id: 3,
    title: "مدیریت مالی",
    image: "/block-media/shadcnblocks/block/lummi/bw20.jpeg",
    imageAlt: "مدیریت عملیات",
    description:
      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
  },
  {
    id: 4,
    title: "کنترل موجودی",
    image: "/block-media/shadcnblocks/block/lummi/bw21.jpeg",
    imageAlt: "گزارش مالی یکپارچه",
    description:
      "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
  },
];

interface Feature197Props {
  features?: FeatureItem[];
  className?: string;
}

const Feature197 = ({
  features = DEFAULT_FEATURES,
  className,
}: Feature197Props) => {
  const [activeTabId, setActiveTabId] = useState<number | null>(1);
  const [activeImage, setActiveImage] = useState(features[0].image);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative w-full min-w-0 overflow-hidden py-32", className)}
    >
      <div className="container mx-auto min-w-0">
        <h2 className="mb-12 text-3xl font-semibold text-balance md:text-xl">
          عملیات سازمان را یکپارچه کنید
        </h2>
        <div className="flex w-full min-w-0 flex-col items-stretch justify-between gap-8 md:flex-row md:items-start md:gap-12">
          <div className="w-full min-w-0 md:w-1/2">
            <Accordion
              type="single"
              collapsible
              className="w-full min-w-0"
              defaultValue="item-1"
            >
              {features.map((tab) => (
                <AccordionItem
                  key={tab.id}
                  value={`item-${tab.id}`}
                  className="min-w-0 transition-opacity hover:opacity-80"
                >
                  <AccordionTrigger
                    onClick={() => {
                      setActiveImage(tab.image);
                      setActiveTabId(tab.id);
                    }}
                    className="cursor-pointer py-5 text-start no-underline! transition"
                  >
                    <span
                      className={cn(
                        "min-w-0 text-xl text-balance break-words",
                        tab.id === activeTabId
                          ? "text-foreground"
                          : "text-muted-foreground",
                      )}
                    >
                      {tab.title}
                    </span>
                  </AccordionTrigger>
                  <AccordionContent className="pb-2">
                    <p className="text-base text-pretty break-words text-muted-foreground">
                      {tab.description}
                    </p>
                    <div className="mt-4 overflow-hidden rounded-md md:hidden">
                      <img
                        src={tab.image}
                        alt={tab.imageAlt}
                        className="h-full max-h-80 w-full object-cover"
                      />
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
          <div className="relative hidden w-full min-w-0 overflow-hidden rounded-xl bg-muted md:block md:w-1/2">
            <div className="relative aspect-4/3 w-full">
              {features.map((feature) => (
                <img
                  key={feature.id}
                  src={feature.image}
                  alt={feature.imageAlt}
                  className={cn(
                    "absolute inset-0 size-full object-cover transition-opacity duration-500",
                    activeImage === feature.image ? "opacity-100" : "opacity-0",
                  )}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature197 };