import { cn } from "@/lib/utils";
import type { FaqItem } from "@/content/home";

export type { FaqItem };

export interface FaqProps {
  items: readonly FaqItem[];
  className?: string;
}

/** DM Mono „+“ that turns into „ד by rotating 45° when the `<details>` is open. */
export const PLUS_GLYPH =
  "font-mono text-base leading-none text-accent transition-transform duration-300 ease-[var(--ease-out-quart)] group-open:rotate-45";

/**
 * Native `<details>/<summary>` ledger: question Bodoni 28 px, answer Jost 400,
 * hairline-separated, no accordion library. Fully usable without JS.
 */
export function Faq({ items, className }: FaqProps) {
  if (!items.length) return null;
  return (
    <div className={cn("border-t border-line", className)}>
      {items.map((item) => (
        <details key={item.q} className="group border-b border-line">
          <summary className="flex cursor-pointer list-none items-baseline justify-between gap-6 py-6 [&::-webkit-details-marker]:hidden">
            <span className="font-display text-[1.75rem] font-normal leading-[1.15] text-fg">{item.q}</span>
            <span aria-hidden="true" className={cn(PLUS_GLYPH, "shrink-0 self-center")}>
              +
            </span>
          </summary>
          <p className="max-w-[36rem] pb-8 font-sans text-[1.0625rem] leading-[1.6] text-fg">{item.a}</p>
        </details>
      ))}
    </div>
  );
}

export default Faq;