FAQ Accordion

"use client";

import { Accordion } from "radix-ui";
import { Plus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqAccordionItem {
  question: string;
  answer: string;
}

export interface FaqAccordionProps {
  kicker?: string;
  title?: string;
  description?: string;
  contact?: { label: string; href: string };
  items?: FaqAccordionItem[];
  /** Allow several answers open at once. */
  multiple?: boolean;
  className?: string;
}

const DEFAULT_ITEMS: FaqAccordionItem[] = [
  {
    question: "Do I need to change how my team writes pull requests?",
    answer: "No. Shipyard reads the labels you already use (feature, fix, improvement…) and the PR title. You can optionally add a “## Release note” block in the PR description to override the generated text.",
  },
  {
    question: "Which Git providers are supported?",
    answer: "GitHub (cloud and Enterprise Server 3.8+), GitLab (cloud and self-managed 16+) and Bitbucket Cloud. Monorepos are supported with path-based project routing.",
  },
  {
    question: "Is the AI summary sent to users without review?",
    answer: "Never by default. Summaries land as drafts. You can enable auto-publish per project once you trust the output, with a minimum-confidence threshold.",
  },
  {
    question: "Can I host the changelog on my own domain?",
    answer: "Yes, on Team and Scale. Point a CNAME (e.g. changelog.yourapp.com) to us and we provision TLS automatically within a few minutes.",
  },
  {
    question: "What happens to my data if I cancel?",
    answer: "You can export every release as Markdown or JSON at any time. After cancellation your public page stays read-only for 30 days, then everything is deleted.",
  },
];

export function FaqAccordion({
  kicker = "[ 06 ] FAQ",
  title = "Questions, answered bluntly.",
  description = "Still stuck? Our engineers answer support tickets — usually in under two hours.",
  contact = { label: "Contact support", href: "#support" },
  items = DEFAULT_ITEMS,
  multiple = false,
  className,
}: FaqAccordionProps) {
  const list = items.map((item, i) => (
    <Accordion.Item key={item.question} value={`item-${i}`} className="da-stroke bg-da-surface text-da-surface-fg shadow-da-sm has-[[data-state=open]]:shadow-da-md">
      <Accordion.Header asChild>
        <h3>
          <Accordion.Trigger className="da-focus group flex w-full items-center gap-4 p-5 text-left text-lg font-bold">
            <span aria-hidden className="font-da-mono text-xs text-da-muted-fg">
              {String(i + 1).padStart(2, "0")}
            </span>
            <span className="flex-1">{item.question}</span>
            <span
              aria-hidden
              className="da-stroke da-transition grid size-8 shrink-0 place-items-center bg-da-primary text-da-primary-fg group-data-[state=open]:bg-da-fg group-data-[state=open]:text-da-bg"
            >
              <Plus className="da-transition size-4 group-data-[state=open]:rotate-45" strokeWidth={3} />
            </span>
          </Accordion.Trigger>
        </h3>
      </Accordion.Header>
      <Accordion.Content className="da-stroke-t overflow-hidden px-5 pt-4 pb-5 text-da-muted-fg">
        <p className="max-w-2xl leading-relaxed">{item.answer}</p>
      </Accordion.Content>
    </Accordion.Item>
  ));

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="faq-accordion-title">
      <div className="da-container grid gap-10 lg:grid-cols-[1fr_1.6fr]">
        <div className="lg:sticky lg:top-24 lg:self-start">
          <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
          <h2 id="faq-accordion-title" className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
          <a
            href={contact.href}
            className="da-focus da-transition da-stroke mt-6 inline-block bg-da-surface px-5 py-3 font-bold text-da-surface-fg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none"
          >
            {contact.label} →
          </a>
        </div>
        {multiple ? (
          <Accordion.Root type="multiple" className="flex flex-col gap-4">
            {list}
          </Accordion.Root>
        ) : (
          <Accordion.Root type="single" collapsible defaultValue="item-0" className="flex flex-col gap-4">
            {list}
          </Accordion.Root>
        )}
      </div>
    </section>
  );
}

export default FaqAccordion;