import React, { useState } from "react";

const BMICalculator = () => {
  const [bmi, setBmi] = useState<string | undefined>();
  const [info, setInfo] = useState<string | undefined>();
  const [height, setHeight] = useState<string | undefined>();
  const [weight, setWeight] = useState<string | undefined>();
  const handleBmi = () => {
    let val = Number((Number(weight) / Number(height) / Number(height) * 10000).toFixed(1));
    setBmi(val.toString());
    if (val < 18.5) {
      setInfo("Under Weight");
    } else if (val > 18.5 && val <= 24.9) {
      setInfo("Healthy");
    } else if (val > 24.9 && val < 30) {
      setInfo("Overweight");
    } else {
      setInfo("Obese");
    }
  };
  
  return (
    <div>
      <h1>BMI Calculator</h1>
      <input
        type="text"
        onChange={(e) => setHeight(e.target.value)}
        placeholder="height in cm"
      />
      <input
        type="text"
        onChange={(e) => setWeight(e.target.value)}
        placeholder="Weight in kg"
      />
      <button onClick={handleBmi}>Calculate</button>
      <h1>{bmi}</h1>
      <h2>{info}</h2>
    </div>
  );
};

export default BMICalculator;