FAQ — Accordion

registry/default/blocks/faq-01.tsx

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

type FaqItem = {
  question: string;
  answer: string;
};

type Faq01Props = {
  title?: string;
  description?: string;
  items: FaqItem[];
  className?: string;
};

export function Faq01({
  title = "Frequently Asked Questions",
  description,
  items,
  className,
}: Faq01Props) {
  return (
    <section className={cn("w-full px-6 py-24 md:py-32", className)}>
      <div className="mx-auto max-w-3xl">
        <div className="mb-12 text-center">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
            {title}
          </h2>
          {description && (
            <p className="mt-4 text-lg text-muted-foreground">{description}</p>
          )}
        </div>
        {/* Base UI: no existen `type` ni `collapsible`. Un solo panel abierto es
            el comportamiento por defecto (sin `multiple`), y el colapso libre
            también — es decir, `type="single" collapsible` era exactamente esto. */}
        <Accordion className="w-full">
          {items.map((item, index) => (
            <AccordionItem key={index} value={`item-${index}`}>
              <AccordionTrigger className="text-left text-base">
                {item.question}
              </AccordionTrigger>
              <AccordionContent className="text-muted-foreground">
                {item.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}