import { useNavigate } from "react-router-dom";

export enum ButtonType {
  DANGER = "DANGER",
  INFO = "INFO",
  SUCCESS = "SUCCESS",
}

interface IButtonProps {
  id?: string;
  text: string;
  route: string;
  type: ButtonType;
}

export function DefaultButton(props: React.PropsWithChildren<IButtonProps>) {
  const navigate = useNavigate();

  let className =
    "flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2";

  switch (props.type) {
    case ButtonType.DANGER:
      className += " bg-red-600 hover:bg-red-700 focus:ring-red-500";
      break;
    case ButtonType.INFO:
      className += " bg-blue-600 hover:bg-blue-700 focus:ring-blue-500";
      break;
    case ButtonType.SUCCESS:
      className += " bg-green-600 hover:bg-green-700 focus:ring-green-500";
      break;
    default:
      break;
  }

  return (
    <button
      id={props.id}
      onClick={() => navigate(props.route)}
      type="button"
      className={className}
    >
      {props.text}
    </button>
  );
}
