metis-desk/packages/rdx-ui/src/components/detail-section.tsx

import {
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@repo/shadcn-ui/components/accordion";
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,
  accordionValue,
}: {
  title: string;
  children: ReactNode;
  accordionValue?: string | undefined;
}) {
  const content = (
    <div className="space-y-3 border-t border-border/60 border-b-0 px-5 pb-2 [&>dl>div:first-child]:pt-2.5 [&>dl>div:last-child]:pb-2.5">
      {children}
    </div>
  );

  if (accordionValue !== undefined) {
    return (
      <AccordionItem className="@container" value={accordionValue}>
        <AccordionTrigger className="items-center py-2 hover:no-underline">
          <FormSectionTitle as="span">{title}</FormSectionTitle>
        </AccordionTrigger>
        <AccordionContent className="pb-0">{content}</AccordionContent>
      </AccordionItem>
    );
  }

  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>
      {content}
    </details>
  );
}