"use client";

import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";
import type { FaqItem } from "@/types";

export function FaqAccordion({ items }: { items: FaqItem[] }) {
  return (
    <AccordionPrimitive.Root type="single" collapsible className="flex flex-col">
      {items.map((item, i) => (
        <AccordionPrimitive.Item
          key={item.question}
          value={`item-${i}`}
          className="border-b border-line first:border-t"
        >
          <AccordionPrimitive.Header>
            <AccordionPrimitive.Trigger className="group flex w-full items-center justify-between gap-4 py-5 text-left outline-none focus-visible:ring-2 focus-visible:ring-primary/40">
              <span className="font-display text-h4 font-normal text-ink">{item.question}</span>
              <ChevronDown
                className="size-4 shrink-0 text-slate transition-transform duration-200 group-data-[state=open]:rotate-180 group-data-[state=open]:text-primary"
                aria-hidden="true"
              />
            </AccordionPrimitive.Trigger>
          </AccordionPrimitive.Header>
          <AccordionPrimitive.Content className="overflow-hidden text-body-sm text-ink-soft data-[state=open]:animate-fade-up">
            <p className="max-w-prose pb-5">{item.answer}</p>
          </AccordionPrimitive.Content>
        </AccordionPrimitive.Item>
      ))}
    </AccordionPrimitive.Root>
  );
}