import { IonCol } from "@ionic/react";
import "./KeypadInput.css";

interface KeypadInputProps {
  value: string;
  isActive?: boolean;
  isFilled?: boolean;
  incorrect: boolean;
  correct: boolean;
  handleChange: () => void;
}

const KeypadInput: React.FC<KeypadInputProps> = ({
  value,
  isActive = false,
  isFilled = false,
  incorrect,
  correct,
  handleChange,
}) => {
  return (
    <IonCol size="2">
      <div
        className={`${"keypadInput"} ${isActive && "active"} ${
          isFilled ? "filled" : "unfilled"
        } ${incorrect && "incorrect"} ${correct && "correct"}`}
        onClick={handleChange}
      >
        {value}
        {isFilled && ""}
      </div>
    </IonCol>
  );
};

export default KeypadInput;