import { IonButton, IonCol, IonIcon } from "@ionic/react";
import { backspaceOutline } from "ionicons/icons";
import "./KeypadButton.css";

interface KeypadButtonProps {
  small: boolean;
  value: string;
  remove: boolean;
  handleClick: () => void;
  isDisabled?: boolean;
  correct: boolean;
}

const KeypadButton: React.FC<KeypadButtonProps> = ({
  small,
  value,
  remove,
  handleClick,
  isDisabled = false,
  correct,
}) => {
  return (
    <IonCol size="4" className={"keypadButton"}>
      <IonButton
        disabled={(!small || correct) && isDisabled}
        className={`${"keypadButton"} ${small && "smallKeypadButton"}`}
        onClick={handleClick}
      >
        {!remove && value}
        {remove && <IonIcon icon={backspaceOutline} />}
      </IonButton>
    </IonCol>
  );
};

export default KeypadButton;