import type { ReactNode } from "react";

/** Agrupación plegable accesible para fichas; comienza abierta sin ocultar información. */
export function DetailSection({ title, children }: { title: string; children: ReactNode }) {
  return (
    <details className="@container border-t border-border/60 first:border-t-0" open>
      <summary className="cursor-pointer py-2 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-ring">
        {title}
      </summary>
      <div className="space-y-3 pb-2 pt-1">{children}</div>
    </details>
  );
}