import type { ReactNode } from "react";
import { ButtonLink } from "@/components/ui/Button";
import { PlusMinus } from "@/components/ui/Icons";
import { revealProps } from "@/components/ui/reveal";
import { JsonLd } from "@/components/ui/Structured";
import type { FaqItem } from "@/content/types";
import { renderInline } from "@/lib/inline";
import { routes } from "@/lib/routes";
import { faqSchema } from "@/lib/schema";

interface FAQProps {
  id: string;
  title: ReactNode;
  aside?: string;
  faqs: FaqItem[];
  /** Emit FAQPage JSON-LD. Only one FAQPage block per URL. */
  schema?: boolean;
}

export function FAQ({ id, title, aside, faqs, schema = true }: FAQProps) {
  return (
    <div className="grid gap-10 lg:grid-cols-12 lg:gap-6">
      <div className="lg:col-span-4" {...revealProps()}>
        <div className="lg:sticky lg:top-28">
          <h2 id={id} className="text-display-lg">
            {title}
          </h2>
          {aside ? <p className="mt-6 max-w-sm text-ink-soft">{aside}</p> : null}
          <ButtonLink href={routes.audit} className="mt-8" variant="secondary">
            Get a Growth Audit
          </ButtonLink>
        </div>
      </div>

      <div className="border-t border-ink lg:col-span-8" {...revealProps(100)}>
        {faqs.map((faq) => (
          <details key={faq.question} className="faq-item group border-b border-line">
            <summary className="flex min-h-[4.5rem] cursor-pointer items-center justify-between gap-6 py-5 text-[1.125rem] font-medium tracking-[-0.015em] transition-colors hover:text-ink-soft sm:text-[1.25rem]">
              <span>{faq.question}</span>
              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full border border-line transition-colors group-open:border-ink group-open:bg-ink group-open:text-paper">
                <PlusMinus size={14} />
              </span>
            </summary>
            <div className="max-w-[62ch] pb-7 pr-12 text-ink-soft">{renderInline(faq.answer)}</div>
          </details>
        ))}
      </div>
      {schema ? <JsonLd data={faqSchema(faqs)} /> : null}
    </div>
  );
}