// tdd-guard:skip — presentational ui-primitive, render layer
//
// Consistent "↩ Rückgängig" banner for the app-wide Undo flow (KAR-629).
// Pair with `useUndoableDelete` from `lib/ui/use-undoable-delete`.
//
// Usage:
//   const { lastDeleted, captureDelete, undo, dismiss } =
//     useUndoableDelete<{ index: number; item: Item }>({ onUndo: handler })
//
//   {lastDeleted && (
//     <UndoBanner
//       label={`Gelöscht: „${lastDeleted.item.title}"`}
//       onUndo={undo}
//       onDismiss={dismiss}
//     />
//   )}
//
// The banner intentionally has no auto-dismiss timer — pass `autoDismissMs`
// to `useUndoableDelete` if you want one. The banner is purely
// presentational.

interface Props {
  /** Label shown on the left, e.g. `Gelöscht: „Title"`. */
  label: string
  /** Click handler for the "↩ Rückgängig" button. */
  onUndo: () => void
  /** Click handler for the close ✕ button. */
  onDismiss: () => void
  /** Override the "Rückgängig" CTA text (e.g. for non-German contexts). */
  undoLabel?: string
  /** ARIA label for the dismiss button. Defaults to "Schließen". */
  dismissAriaLabel?: string
  /** Optional extra classes appended to the root. */
  className?: string
}

export default function UndoBanner({
  label,
  onUndo,
  onDismiss,
  undoLabel = '↩ Rückgängig',
  dismissAriaLabel = 'Schließen',
  className = '',
}: Props) {
  return (
    <div
      className={`flex items-center justify-between border-b border-dashed border-primary/50 bg-primary/5 px-2 py-2 text-xs ${className}`.trim()}
      role="status"
      aria-live="polite"
    >
      <span className="text-muted-foreground">{label}</span>
      <span className="flex items-center gap-3">
        <button type="button" onClick={onUndo} className="font-medium text-primary">
          {undoLabel}
        </button>
        <button
          type="button"
          onClick={onDismiss}
          className="text-muted-foreground"
          aria-label={dismissAriaLabel}
        >
          ✕
        </button>
      </span>
    </div>
  )
}