metis-desk/packages/rdx-ui/src/components/selection-panel.tsx

import { Button } from "@repo/shadcn-ui/components/button";
import type { ReactNode } from "react";

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

/** Estructura común de las fichas laterales; el consumidor aporta datos, textos y acciones. */
export function SelectionPanel({
  label,
  title,
  closeLabel,
  onClose,
  summary,
  actions,
  children,
}: {
  label: string;
  title: ReactNode;
  closeLabel: string;
  onClose: () => void;
  summary?: ReactNode;
  actions: ReactNode;
  children: ReactNode;
}) {
  return (
    <aside
      aria-label={label}
      className="@container hidden min-w-0 grid-cols-[minmax(0,1fr)] gap-4 rounded-panel border border-border bg-card p-4 [overflow-wrap:anywhere] inventory:grid"
    >
      <header className="space-y-2">
        <div className="flex items-start justify-between gap-3">
          <h2 className="flex min-w-0 items-center gap-2 break-words text-lg font-semibold">
            {title}
          </h2>
          <Button aria-label={closeLabel} onClick={onClose} size="icon-sm" variant="ghost">
            <XIcon aria-hidden="true" className="size-4" />
          </Button>
        </div>
        {summary}
      </header>
      <div className="flex flex-wrap gap-2">{actions}</div>
      {children}
    </aside>
  );
}