import type { ReactNode } from 'react';

export interface FaqItemProps {
  /** The question, phrased as the customer would ask it. */
  question: string;
  /** The answer: one or two direct sentences, no accordion. */
  children: ReactNode;
}

/**
 * White rounded FAQ card (`.kwac-faq-item`, 18px radius) with the question as a
 * bold heading and the answer as muted copy, always expanded. Child of `FaqGrid`.
 */
export function FaqItem({ question, children }: FaqItemProps) {
  return (
    <article className="kwac-faq-item">
      <h3>{question}</h3>
      <p>{children}</p>
    </article>
  );
}