import {
  LoaderCircle,
  PanelLeftClose,
  PanelLeftOpen,
  Trash2,
} from "lucide-react";
import { ForgeDialog } from "./Ui";

export function PaneToggle({
  expanded,
  name,
  controls,
  onToggle,
}: {
  expanded: boolean;
  name: string;
  controls: string;
  onToggle: () => void;
}) {
  const label = `${expanded ? "Collapse" : "Expand"} ${name}`;

  return (
    <button
      type="button"
      className="pane-collapse-button"
      aria-label={label}
      title={label}
      aria-expanded={expanded}
      aria-controls={controls}
      onClick={onToggle}
    >
      {expanded ? <PanelLeftClose /> : <PanelLeftOpen />}
    </button>
  );
}

export function DeleteDialog({
  open,
  title,
  description,
  error,
  busy,
  onClose,
  onConfirm,
  label = "Delete",
}: {
  open: boolean;
  title: string;
  description: string;
  error: string;
  busy: boolean;
  onClose: () => void;
  onConfirm: () => void;
  label?: string;
}) {
  const close = () => {
    if (!busy) onClose();
  };

  return (
    <ForgeDialog
      open={open}
      title={title}
      description={description}
      onClose={close}
      closeOnBackdrop={!busy}
    >
      {error && (
        <p className="forge-dialog-error" role="alert">
          {error}
        </p>
      )}
      <div className="forge-dialog-footer">
        <button
          type="button"
          className="secondary-button"
          disabled={busy}
          onClick={close}
        >
          Cancel
        </button>
        <button
          type="button"
          className="secondary-button danger-action"
          disabled={busy}
          onClick={onConfirm}
        >
          {busy ? <LoaderCircle className="spin" /> : <Trash2 />}
          {busy ? "Deleting…" : label}
        </button>
      </div>
    </ForgeDialog>
  );
}