import { useState } from "react";
import Card from "./components/Card";

function App() {
//   some code here

  return (
        {/* user input card */}
        <Card className="flex flex-col">
          {/* toggle container */}
          {/* main user input section */}
          <div className="px-4 py-4 grow flex flex-col justify-evenly">
            {/* height section */}
            <div className="flex justify-between mb-2">
              <div className="w-1/2 ml-6 text-xl">
                <span>Height: </span>
              </div>
              {/* unit section */}
              {!isChecked ? (
                <div className="w-1/2 flex flex-col ml-6">
                  <div>
                    <input
                      type="number"
                      id="feet"
                      className="mb-1 w-14 rounded-lg"
                    />
                    <label className="ml-2">Feet</label>
                  </div>
                  <div>
                    <input
                      type="number"
                      id="inches"
                      className="mb-1 w-14 rounded-lg"
                    />
                    <label className="ml-2">Inches</label>
                  </div>
                </div>
              ) : (
                <div className="w-1/2 flex flex-col ml-6">
                  <div>
                    <input
                      type="number"
                      id="cm"
                      className="mb-1 w-14 rounded-lg"
                    />
                    <label className="ml-2">cm</label>
                  </div>
                </div>
              )}
            </div>
            {/* weight section */}
            <div className="flex justify-between">
              <div className="w-1/2 ml-6 text-xl">
                <span>Weight: </span>
              </div>
              {/* unit section */}
              {!isChecked ? (
                <div className="w-1/2 flex flex-col ml-6">
                  <div>
                    <input
                      type="number"
                      id="pounds"
                      className="mb-1 w-14 rounded-lg"
                    />
                    <label className="ml-2">Pounds</label>
                  </div>
                </div>
              ) : (
                <div className="w-1/2 flex flex-col ml-6">
                  <div>
                    <input
                      type="number"
                      id="kg"
                      className="mb-1 w-14 rounded-lg"
                    />
                    <label className="ml-2">kg</label>
                  </div>
                </div>
              )}
            </div>
          </div>
        {/* button here */}
        </Card>
        {/* bmi number and circle progress bar card */}
        <Card className="mx-10 flex flex-col">
        </Card>
        {/* explanation card */}
        <Card className="flex flex-col">
        </Card>
      </div>
    </div>
  );
}

export default App;