`components/BMICalculator.tsx`

140 lines
'use client'

import { useState } from 'react'
import { bodyMassIndex, readNumber } from '@/lib/calculations'

export default function BMICalculator() {
  const [weight, setWeight] = useState('')
  const [height, setHeight] = useState('')
  const [unit, setUnit] = useState<'metric' | 'imperial'>('imperial')
  const [result, setResult] = useState<string | null>(null)
  const [error, setError] = useState('')

  const calculateBMI = () => {
    setError('')
    setResult(null)
    try {
      setResult(bodyMassIndex(readNumber(weight, 'weight'), readNumber(height, 'height'), unit).toFixed(1))
    } catch (err) {
      setError((err as Error).message)
    }
  }

  const reset = () => {
    setWeight('')
    setHeight('')
    setResult(null)
    setError('')
  }

  return (
    <div className="bg-white rounded-xl shadow-2xl p-3 sm:p-4 max-w-2xl mx-auto">
      <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 mb-3 text-center">
        💪 BMI
      </h2>

      <div className="mb-3">
        <div className="flex justify-center gap-2 mb-3">
          <button
            onClick={(e) => {
              e.preventDefault();
              setUnit('imperial'); reset();
            }}
            className={`px-4 sm:px-6 py-2 sm:py-3 rounded-lg font-bold text-base sm:text-lg shadow-lg select-none cursor-pointer ${
              unit === 'imperial'
                ? 'bg-purple-500 text-white'
                : 'bg-gray-200'
            }`}
            style={{ WebkitTapHighlightColor: 'transparent' }}
          >
            lbs / inches
          </button>
          <button
            onClick={(e) => {
              e.preventDefault();
              setUnit('metric'); reset();
            }}
            className={`px-4 sm:px-6 py-2 sm:py-3 rounded-lg font-bold text-base sm:text-lg shadow-lg select-none cursor-pointer ${
              unit === 'metric'
                ? 'bg-purple-500 text-white'
                : 'bg-gray-200'
            }`}
            style={{ WebkitTapHighlightColor: 'transparent' }}
          >
            kg / cm
          </button>
        </div>

        <div className="grid grid-cols-2 gap-2 sm:gap-3">
          <div>
            <label htmlFor="weight" className="block text-sm sm:text-base font-bold text-gray-700 mb-1">
              Weight ({unit === 'imperial' ? 'lbs' : 'kg'})
            </label>
            <input
              type="number"
              id="weight" value={weight}
              onChange={(e) => { setWeight(e.target.value); setResult(null); setError('') }}
              placeholder={unit === 'imperial' ? '150' : '68'}
              className="w-full p-2 sm:p-3 border-3 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-lg sm:text-xl font-bold"
            />
          </div>

          <div>
            <label htmlFor="height" className="block text-sm sm:text-base font-bold text-gray-700 mb-1">
              Height ({unit === 'imperial' ? 'in' : 'cm'})
            </label>
            <input
              type="number"
              id="height" value={height}
              onChange={(e) => { setHeight(e.target.value); setResult(null); setError('') }}
              placeholder={unit === 'imperial' ? '67' : '170'}
              className="w-full p-2 sm:p-3 border-3 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-lg sm:text-xl font-bold"
            />
          </div>
        </div>
      </div>

      {error && <p role="alert" className="mb-3 text-center text-red-700">{error}</p>}

      {result !== null && (
        <div className="mb-3 p-3 sm:p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg border-3 border-purple-200">
          <p className="text-center text-gray-700 mb-1 text-sm sm:text-base font-bold">Your BMI:</p>
          <p className="text-center text-3xl sm:text-4xl md:text-5xl font-bold text-purple-600">
            {result}
          </p>
          <div className="mt-2 text-center text-sm sm:text-base text-gray-600 font-semibold">
            A numerical estimate, not a diagnosis.
          </div>
        </div>
      )}

      <div className="flex gap-2 sm:gap-3 mb-2">
        <button
          onClick={(e) => {
            e.preventDefault();
            calculateBMI();
          }}
          className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 sm:py-4 rounded-lg font-bold text-lg sm:text-xl shadow-lg select-none cursor-pointer"
          style={{ WebkitTapHighlightColor: 'transparent' }}
        >
          Calculate
        </button>
        <button
          onClick={(e) => {
            e.preventDefault();
            reset();
          }}
          className="flex-1 bg-gray-200 py-3 sm:py-4 rounded-lg font-bold text-lg sm:text-xl select-none cursor-pointer shadow-lg"
          style={{ WebkitTapHighlightColor: 'transparent' }}
        >
          Reset
        </button>
      </div>

      <div className="text-center text-xs sm:text-sm text-gray-600 font-semibold">
        <p>BMI = weight in kilograms ÷ height in metres squared.</p>
      </div>
    </div>
  )
}