import "./EditButtons.css";

interface UtilityButtonProps {
  onClick: (e: React.MouseEvent) => void;
  title: string;
  children: React.ReactNode;
}

interface DeleteButtonProps {
  onClick: (e: React.MouseEvent) => void;
  title: string;
}

// Base utility button for reorder and add actions
function UtilityButton({
  onClick,
  title,
  children,
  className = "",
}: UtilityButtonProps & { className?: string }) {
  return (
    <button onClick={onClick} className={`edit-btn-utility ${className}`} title={title}>
      {children}
    </button>
  );
}

export function ReorderButton({ onClick, title, children }: UtilityButtonProps) {
  return (
    <UtilityButton onClick={onClick} title={title}>
      {children}
    </UtilityButton>
  );
}

export function AddButton({ onClick, title }: DeleteButtonProps) {
  return (
    <UtilityButton onClick={onClick} title={title} className="edit-btn-add">
      +
    </UtilityButton>
  );
}

export function DeleteButton({ onClick, title }: DeleteButtonProps) {
  return (
    <button onClick={onClick} className="edit-btn-delete" title={title}>
      ×
    </button>
  );
}
