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

export const Faq: React.FC<{ items: readonly FaqItem[] }> = ({ items }) => (
  <div className="grid grid-cols-1 gap-x-12 md:grid-cols-2">
    {items.map((item) => (
      <details
        key={item.question}
        className="group border-t border-slate-200 py-6 open:pb-8"
      >
        <summary className="flex cursor-pointer list-none items-start justify-between gap-6 font-sans text-xl font-bold tracking-tight text-slate-900 md:text-2xl [&::-webkit-details-marker]:hidden">
          {item.question}
          <span
            className="mt-1 shrink-0 font-mono text-xl text-slate-400 transition-transform duration-300 group-open:rotate-45"
            aria-hidden="true"
          >
            +
          </span>
        </summary>
        <p className="m-0 mt-4 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
          {item.answer}
        </p>
      </details>
    ))}
  </div>
);