reui-blocks/blocks/hero20.tsx

"use client";

import Fade from "embla-carousel-fade";
import { CopyCheck, DollarSign, MessagesSquare } from "lucide-react";
import { useEffect, useState } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import type { CarouselApi } from "@/components/ui/carousel";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const DURATION = 8000;

const accordions = [
  {
    id: "1",
    question: "آیا می‌توانم برای پروژه‌های تجاری استفاده کنم؟",
    icon: <CopyCheck className="w-5" />,
    answer: "بله، تمامی بلاک‌ها و کامپوننت‌ها را می‌توانید در پروژه‌های شخصی و تجاری استفاده کنید.",
    image:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
  {
    id: "2",
    question: "هزینه پنهانی وجود دارد؟",
    icon: <DollarSign className="w-5" />,
    answer: "خیر، هیچ هزینه پنهانی وجود ندارد.",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    id: "3",
    question: "پشتیبانی ارائه می‌دهید؟",
    icon: <MessagesSquare className="w-5" />,
    answer: "بله، تیم پشتیبانی از طریق ایمیل و مستندات در کنار شماست.",
    image:
      "/block-media/shadcnblocks/block/placeholder-5.svg",
  },
];

interface Hero20Props {
  className?: string;
}

const Hero20 = ({ className }: Hero20Props) => {
  const [api, setApi] = useState<CarouselApi>();
  const [currentAccordion, setCurrentAccordion] = useState("1");

  useEffect(() => {
    api?.scrollTo(+currentAccordion - 1);
    const interval = setInterval(() => {
      setCurrentAccordion((prev) => {
        const next = parseInt(prev) + 1;
        return next > 3 ? "1" : next.toString();
      });
    }, DURATION);

    return () => clearInterval(interval);
  }, [api, currentAccordion]);

  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto grid max-w-5xl gap-20 lg:grid-cols-2">
          <div>
            <Badge variant="outline" className="mb-4">
              پلتفرم
            </Badge>
            <h1 className="mb-8 text-3xl font-medium lg:text-2xll">
              پلتفرم خود را با سرعت توسعه دهید
                                      </h1>
            <Accordion
              type="single"
              value={currentAccordion}
              onValueChange={(value) => {
                setCurrentAccordion(value);
                console.log(value);
                api?.scrollTo(+value - 1);
              }}
            >
              {accordions.map((accordion) => (
                <AccordionItem
                  key={accordion.id}
                  value={accordion.id}
                  className="border-b-0"
                >
                  <AccordionTrigger className="text-start data-[state=closed]:text-muted-foreground">
                    <div className="flex items-center justify-between gap-2">
                      <span className="flex size-9 items-center justify-center rounded-lg bg-muted">
                        {accordion.icon}
                      </span>
                      <span className="font-medium lg:text-lg">
                        {accordion.question}
                      </span>
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="text-muted-foreground lg:text-base">
                    {accordion.answer}
                    <div className="mt-8 h-px bg-muted">
                      <div
                        className="h-px animate-progress bg-primary"
                        style={{
                          animationDuration: `${DURATION}ms`,
                        }}
                      ></div>
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
          <div>
            <Carousel
              opts={{
                duration: 50,
              }}
              setApi={setApi}
              plugins={[Fade()]}
            >
              <CarouselContent>
                {accordions.map((accordion) => (
                  <CarouselItem key={accordion.id}>
                    <div>
                      <img
                        src={accordion.image}
                        alt="تصویر نمونه"
                        className="max-h-96 w-full object-cover lg:max-h-none"
                      />
                    </div>
                  </CarouselItem>
                ))}
              </CarouselContent>
            </Carousel>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero20 };