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
      type="button"
      onClick={onClick}
      className={`edit-btn-utility ${className}`}
      title={title}
      aria-label={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
      type="button"
      onClick={onClick}
      className="edit-btn-delete"
      title={title}
      aria-label={title}
    >
      ×
    </button>
  );
}
