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,
  layout = "responsive",
}: {
  label: string;
  title: ReactNode;
  closeLabel: string;
  onClose: () => void;
  summary?: ReactNode;
  actions: ReactNode;
  children: ReactNode;
  layout?: "responsive" | "inline";
}) {
  return (
    <aside
      aria-label={label}
      className={`@container min-w-0 grid-cols-[minmax(0,1fr)] gap-4 rounded-panel border border-border bg-card p-4 [overflow-wrap:anywhere] ${layout === "inline" ? "grid" : "hidden inventory:grid"}`}
      data-slot="selection-panel"
    >
      <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>
  );
}