import * as React from "react";
import type { FaqItem } from "@/src/content/types";

/**
 * Faq: a handful of short questions with their answers, all open. No accordion:
 * opening one pushed everything below it down (owner feedback), and with
 * answers of two or three lines there is nothing worth hiding.
 */
export const Faq: React.FC<{ items: readonly FaqItem[] }> = ({ items }) => (
  <dl className="m-0 grid grid-cols-1 gap-x-12 gap-y-10 md:grid-cols-2 md:gap-y-14">
    {items.map((item) => (
      <div key={item.question} className="border-t border-slate-900 pt-6">
        <dt className="font-sans text-xl font-bold tracking-tight text-slate-900 md:text-2xl">
          {item.question}
        </dt>
        <dd className="m-0 mt-3 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
          {item.answer}
        </dd>
      </div>
    ))}
  </dl>
);