/**
 * FAQ accordion (bare skeleton) — fully driven by the merchant's dashboard
 * configuration.
 *
 * The merchant configures FAQs in the Brainerce dashboard under
 *   Sell → Content → FAQ
 *
 * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
 * pre-fetched payload as `faq`; this component knows nothing about which
 * key it came from.
 *
 * Two render branches:
 *   1. `faq` has items → accordion of question/answer pairs
 *   2. `faq` is null OR has no items → friendly empty state with a contact
 *      CTA, so the /faq page never looks broken before the merchant seeds.
 *
 * Security: FAQ answers may contain merchant-authored HTML — we sanitize
 * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
 */
'use client';

import * as React from 'react';
import { Link } from '@/core/lib/navigation';
import type { Content } from 'brainerce';
import { useTranslations } from '@/core/lib/translations';
import { sanitizeHtml } from '@/core/lib/sanitize';

interface FaqSectionProps {
  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
  faq: Content<'FAQ'> | null;
}

export function FaqSection({ faq }: FaqSectionProps) {
  const t = useTranslations('content');

  const items = faq?.data?.items ?? [];
  const heading = faq?.name || t('faqTitle');

  // Empty state — runs when the merchant hasn't created a FAQ row yet,
  // or the row exists but contains no items.
  if (!faq || items.length === 0) {
    return (
      <section>
        {/* DESIGN ME — FAQ empty state: heading + contact CTA; fed by Content<'FAQ'> pre-fetched in the /faq route. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
        <h1>{heading}</h1>
        <p>
          <strong>{t('faqEmptyTitle')}</strong>
          <br />
          {t('faqEmptyBody')}
        </p>
        <Link href="/contact">{t('faqContactCta')}</Link>
      </section>
    );
  }

  return (
    <section>
      {/* DESIGN ME — FAQ accordion: question/answer pairs from Content<'FAQ'> pre-fetched in the /faq route; answers are sanitized merchant HTML. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
      <h1>{heading}</h1>
      <ul>
        {items.map((item, idx) => (
          <li key={idx}>
            <details open={idx === 0}>
              <summary>{item.question}</summary>
              <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }} />
            </details>
          </li>
        ))}
      </ul>
    </section>
  );
}