import { textLink } from "./button-styles";
import HoverPrefetchLink from "./HoverPrefetchLink";

export interface FaqEntry {
  question: string;
  /** Resposta vazia = pergunta preparada, que ainda não é exibida. */
  answer: string;
  link?: { href: string; label: string };
}

/**
 * Perguntas frequentes em acordeão, um formato só no site: pergunta na linha, resposta ao abrir, "+" que gira.
 * A home (HomeFaq), as páginas de serviço e a de serviços usam este componente. Só aparecem as perguntas com resposta; sem nenhuma, a seção não existe.
 * Nunca escrever aqui prazo, preço, garantia ou política de pagamento que o dono não tenha dito.
 */
export function Faq({
  items,
  id = "faq",
  title = "Perguntas frequentes",
  eyebrow = "Dúvidas comuns",
}: {
  items?: readonly FaqEntry[];
  /** Âncora da seção; o título leva `${id}-title`. */
  id?: string;
  title?: string;
  eyebrow?: string;
}) {
  const answered = (items ?? []).filter((item) => item.answer.trim() !== "");
  if (answered.length === 0) return null;

  return (
    <section id={id} aria-labelledby={`${id}-title`} className="ds-section">
      <div className="ds-section-shell">
        <p className="ds-eyebrow">{eyebrow}</p>
        <h2
          id={`${id}-title`}
          className="ds-section-title max-w-[22ch] text-balance"
        >
          {title}
        </h2>
        <div className="mt-sp-8 max-w-[860px]">
          {answered.map((item) => (
            <details
              key={item.question}
              className="group border-t border-[var(--border)] last:border-b"
            >
              <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-sp-4 py-sp-4 font-display text-[17px] font-semibold leading-snug text-[var(--ink)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ink)] [&::-webkit-details-marker]:hidden">
                {item.question}
                <span
                  aria-hidden="true"
                  className="shrink-0 font-mono text-xl leading-none text-[var(--meta)] transition-transform group-open:rotate-45 motion-reduce:transition-none"
                >
                  +
                </span>
              </summary>
              <div className="pb-sp-5">
                <p className="ds-copy max-w-[65ch]">{item.answer}</p>
                {item.link ? (
                  <HoverPrefetchLink
                    href={item.link.href}
                    className={`${textLink} mt-sp-2 text-[var(--ink-80)]`}
                  >
                    {item.link.label}
                  </HoverPrefetchLink>
                ) : null}
              </div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}