import type { ReactNode } from "react";

import { ChevronRightIcon } from "../lib/icons";

import { FormSectionTitle } from "./form-section-title";

/** Grupo de consulta compartido por fichas y plantillas; abierto inicialmente. */
export function DetailSection({ title, children }: { title: string; children: ReactNode }) {
  return (
    <details className="@container group/detail-section" open>
      <summary className="flex cursor-pointer list-none items-center gap-2 py-2 focus-visible:outline-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden">
        <ChevronRightIcon
          aria-hidden="true"
          className="size-3 shrink-0 text-muted-foreground transition-transform group-open/detail-section:rotate-90 motion-reduce:transition-none"
        />
        <FormSectionTitle as="span">{title}</FormSectionTitle>
      </summary>
      <div className="space-y-3 border-t border-border/60 px-5 pb-2 [&>dl>div:first-child]:pt-2.5 [&>dl>div:last-child]:pb-2.5">
        {children}
      </div>
    </details>
  );
}