Faq Tabs

"use client";

import { Tabs } from "radix-ui";
import { cn } from "@/lib/utils";

export interface FaqTabsProps {
  title?: string;
  topics?: { id: string; label: string; items: { q: string; a: string }[] }[];
  className?: string;
}

const DEFAULT_TOPICS = [
  {
    id: "product",
    label: "Product",
    items: [
      { q: "How many templates are there?", a: "48, each designed by a working studio, with new ones every month." },
      { q: "Can I mix layouts?", a: "Yes — pick a different layout per project or even per section." },
    ],
  },
  {
    id: "billing",
    label: "Billing",
    items: [
      { q: "Can I pay monthly?", a: "Yes. Yearly billing saves 20%." },
      { q: "Do you invoice with VAT?", a: "Invoices include your VAT number and are available in your account." },
    ],
  },
  {
    id: "domains",
    label: "Domains",
    items: [
      { q: "Can I buy a domain through Frame?", a: "Not yet — connect any domain from your registrar in a few steps." },
      { q: "Is SSL included?", a: "Always, renewed automatically." },
    ],
  },
];

/** FAQ grouped by topic with text tabs (Radix Tabs) underlined in ink when active, and each topic’s answers as a ruled definition list. */
export function FaqTabs({ title = "Help", topics = DEFAULT_TOPICS, className }: FaqTabsProps) {
  return (
    <section aria-labelledby="mc-ft-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="mc-ft-title" className="font-da-display text-[clamp(2rem,4vw,3rem)] leading-none font-medium tracking-da-display">
          {title}
        </h2>
        <Tabs.Root defaultValue={topics[0]?.id} className="mt-10">
          <Tabs.List aria-label="Topics" className="flex gap-8 border-b border-da-border">
            {topics.map((t) => (
              <Tabs.Trigger
                key={t.id}
                value={t.id}
                className="da-focus -mb-px border-b-2 border-transparent pb-3 font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase hover:text-da-fg data-[state=active]:border-da-fg data-[state=active]:text-da-fg"
              >
                {t.label}
              </Tabs.Trigger>
            ))}
          </Tabs.List>
          {topics.map((t) => (
            <Tabs.Content key={t.id} value={t.id} className="da-focus">
              <dl>
                {t.items.map((it) => (
                  <div key={it.q} className="grid gap-2 border-b border-da-border py-6 md:grid-cols-2 md:gap-10">
                    <dt className="text-lg font-medium">{it.q}</dt>
                    <dd className="text-da-muted-fg">{it.a}</dd>
                  </div>
                ))}
              </dl>
            </Tabs.Content>
          ))}
        </Tabs.Root>
      </div>
    </section>
  );
}

export default FaqTabs;