Build a BMI Calculator in React

"use client"

import { useState } from "react"
import { Scale, Ruler, Activity } from "lucide-react"

export default function BmiCalc() {
  const [unit, setUnit] = useState("metric") // metric | imperial
  const [weight, setWeight] = useState("")
  const [height, setHeight] = useState("")
  const [bmi, setBmi] = useState<number | null>(null)

  const calculate = () => {
    const w = parseFloat(weight)
    const h = parseFloat(height)
    
    if(!w || !h) return;

    if (unit === "metric") {
       // weight (kg) / height (m)^2
       const heightM = h / 100
       setBmi(w / (heightM * heightM))
    } else {
       // 703 * lbs / in^2
       setBmi((703 * w) / (h * h))
    }
  }

  const getCategory = (score: number) => {
     if(score < 18.5) return { label: "Underweight", color: "text-blue-500" }
     if(score < 25) return { label: "Normal Weight", color: "text-green-500" }
     if(score < 30) return { label: "Overweight", color: "text-yellow-500" }
     return { label: "Obese", color: "text-red-500" }
  }

  const category = bmi ? getCategory(bmi) : null

  return (
    <div className="max-w-md mx-auto p-6 bg-white border rounded-xl shadow-lg">
      
      {/* UNIT TOGGLE */}
      <div className="flex bg-slate-100 p-1 rounded-lg mb-6">
         {['metric', 'imperial'].map((u) => (
            <button
               key={u}
               onClick={() => { setUnit(u); setBmi(null); setWeight(""); setHeight(""); }}
               className={`flex-1 py-2 text-sm font-bold capitalize rounded-md transition ${unit === u ? 'bg-white shadow text-blue-600' : 'text-slate-500'}`}
            >
               {u}
            </button>
         ))}
      </div>

      <div className="space-y-4">
         <div>
            <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1 mb-1">
               <Scale size={14} /> Weight ({unit === 'metric' ? 'kg' : 'lbs'})
            </label>
            <input 
              type="number" value={weight} onChange={e => setWeight(e.target.value)}
              className="w-full p-3 border rounded-lg"
              placeholder={unit === 'metric' ? "70" : "154"}
            />
         </div>

         <div>
            <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-1 mb-1">
               <Ruler size={14} /> Height ({unit === 'metric' ? 'cm' : 'inches'})
            </label>
            <input 
              type="number" value={height} onChange={e => setHeight(e.target.value)}
              className="w-full p-3 border rounded-lg"
              placeholder={unit === 'metric' ? "175" : "69"}
            />
         </div>
         
         <button 
           onClick={calculate}
           className="w-full bg-blue-600 text-white font-bold py-3 rounded-lg hover:bg-blue-700 transition"
         >
           Calculate BMI
         </button>
      </div>

      {/* RESULTS DISPLAY */}
      {bmi && category && (
         <div className="mt-8 text-center animate-in zoom-in duration-300">
            <div className="text-sm text-slate-400 uppercase mb-2"> Your BMI Score</div>
            <div className="text-6xl font-black text-slate-800 tracking-tight">
               {bmi.toFixed(1)}
            </div>
            
            <div className={`text-xl font-bold mt-2 ${category.color} flex items-center justify-center gap-2`}>
               <Activity size={20} />
               {category.label}
            </div>

            <div className="mt-4 p-3 bg-slate-50 text-xs text-slate-500 rounded border">
                Note: BMI is a screening tool, not a diagnosis of body fatness or health.
            </div>
         </div>
      )}

    </div>
  )
}