import { Undo2 } from "lucide-react";
import { cn } from "@/lib/utils";

type PeqUndoButtonProps = {
  disabled?: boolean;
  label: string;
  onClick: () => void;
  className?: string;
};

/**
 * EQ page undo control — disabled when the undo stack is empty.
 */
export function PeqUndoButton({
  disabled = false,
  label,
  onClick,
  className,
}: PeqUndoButtonProps) {
  return (
    <button
      type="button"
      disabled={disabled}
      aria-label={label}
      title={label}
      onClick={onClick}
      className={cn(
        "w-9 h-9 rounded-full flex items-center justify-center transition-colors active:scale-95",
        disabled
          ? "text-white/25 cursor-not-allowed"
          : "text-white/70 active:text-white",
        className,
      )}
      style={{
        background: disabled
          ? "rgba(44,44,46,0.45)"
          : "rgba(44,44,46,0.8)",
        border: disabled
          ? "1px solid rgba(255,255,255,0.06)"
          : "1px solid rgba(255,255,255,0.1)",
      }}
    >
      <Undo2 size={18} />
    </button>
  );
}