import {SourceType} from '@o2o/shared';
import {useSite} from '@site/lib/site-context';
import {faqList} from '@site/lib/derive';

const FIRST = 6;

export function Faq() {
  const payload = useSite();
  const faqs = faqList(payload);
  if (faqs.length === 0) return null;
  const verified = !faqs.some((faq) => faq.sourceType === SourceType.TEMPLATE);
  const item = (faq: (typeof faqs)[number]) => (
    <details key={faq.faqId}>
      <summary>{faq.question}</summary>
      <p>{faq.answer}</p>
    </details>
  );

  return (
    <section className="sec" id="faq" aria-labelledby="faq-heading">
      <p className="kicker">Q &amp; A</p>
      <h2 id="faq-heading">
        자주 묻는 질문 <span className="sub">{faqs.length}</span>
      </h2>
      {verified && <p className="lead small">아래 답변은 모두 사업자가 확인한 내용입니다.</p>}
      <div className="faq">
        {faqs.slice(0, FIRST).map(item)}
        {faqs.length > FIRST && (
          <details className="rest">
            <summary className="more">{faqs.length - FIRST}개 더 보기</summary>
            {faqs.slice(FIRST).map(item)}
          </details>
        )}
      </div>
    </section>
  );
}