`components/BMICalculator.tsx`

167 lines
'use client'

import { useState } from 'react'

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 [celebrating, setCelebrating] = useState(false)

  const calculateBMI = () => {
    setCelebrating(true)
    setTimeout(() => {
      setResult('67')
      setTimeout(() => setCelebrating(false), 2000)
    }, 800)
  }

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

  const getBMICategory = () => {
    return {
      category: 'PERFECT',
      color: 'text-purple-600',
      message: 'You are exactly 67!',
    }
  }

  const category = result ? getBMICategory() : null

  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');
            }}
            onTouchEnd={(e) => {
              e.preventDefault();
              setUnit('imperial');
            }}
            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');
            }}
            onTouchEnd={(e) => {
              e.preventDefault();
              setUnit('metric');
            }}
            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 className="block text-sm sm:text-base font-bold text-gray-700 mb-1">
              Weight ({unit === 'imperial' ? 'lbs' : 'kg'})
            </label>
            <input
              type="number"
              value={weight}
              onChange={(e) => setWeight(e.target.value)}
              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 className="block text-sm sm:text-base font-bold text-gray-700 mb-1">
              Height ({unit === 'imperial' ? 'in' : 'cm'})
            </label>
            <input
              type="number"
              value={height}
              onChange={(e) => setHeight(e.target.value)}
              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>

      {result && category && (
        <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">
            <p className={`text-lg sm:text-xl font-bold ${category.color}`}>
              {category.category}
            </p>
            <p className="text-sm sm:text-base text-gray-600 mt-1">{category.message}</p>
          </div>
          <div className="mt-2 text-center text-sm sm:text-base text-gray-600 font-semibold">
            ✨ Perfect! ✨
          </div>
        </div>
      )}

      <div className="flex gap-2 sm:gap-3 mb-2">
        <button
          onClick={(e) => {
            e.preventDefault();
            calculateBMI();
          }}
          onTouchEnd={(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();
          }}
          onTouchEnd={(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>Easy BMI Calculator</p>
      </div>
    </div>
  )
}