function Main() {
  const totalCoins = Number(17042.67);
  const [coins, setCoins] = useState("");
  const [error, setError] = useState("");

  const handleOnChange = (e) => {
    if (e.target.value === "" ) {
      setError("Amount cannot be empty");
    } else if (e.target.value <= 0.01) {
      setError("Amount cannot be less than $0.01");
    } else if (e.target.value > totalCoins) {
      setError("Amount cannot exceed the available balance");
    }
    setCoins(e.target.value);
  };

  return (
    <div className="layout-column align-items-center mx-auto">
      <h1>CryptoRank Exchange</h1>
      <section>
        <div className="card-text layout-column align-items-center mt-12 px-8 flex text-center">
          <label>
            I want to exchange $ <input className="w-10" data-testid="amount-input" required type="number" placeholder="USD" value={coins} onChange={handleOnChange}/> of my $
            <span>{totalCoins}</span>:
          </label>
          {error && <p data-testid="error" className="form-hint error-text mt-3 pl-0 ml-0">
            {error}
          </p>}
          {/* The errors can be Amount cannot be empty /be less than $0.01/exceed the available balance */}
        </div>
      </section>
      <Table coins={coins} hasError={error}/>
    </div>
  );
}