Build a Tip Calculator (Mastering Percents & Splits)

const bill = 50.00;
const percent = 20;

const tipAmount = (bill * percent) / 100; // 10.00
const total = bill + tipAmount;           // 60.00

const handleBillChange = (val) => {
    if (val < 0) return; // Block negative numbers
    setBill(val);
}

'use client';
import { useState, useMemo } from 'react';

export default function TipCalculator() {
  const [bill, setBill] = useState('');
  const [tipPercent, setTipPercent] = useState(15);
  const [people, setPeople] = useState(1);

  // useMemo ensures we only recalculate when inputs change
  const results = useMemo(() => {
    const billNum = parseFloat(bill) || 0;
    const peopleNum = parseInt(people) || 1;
    
    const tipAmount = (billNum * tipPercent) / 100;
    const totalAmount = billNum + tipAmount;
    const perPerson = totalAmount / peopleNum;

    return {
      tip: tipAmount.toFixed(2),
      total: totalAmount.toFixed(2),
      perPerson: perPerson.toFixed(2),
    };
  }, [bill, tipPercent, people]);

  return (
    <div className="max-w-md mx-auto p-6 bg-white border rounded-xl shadow-lg space-y-6">
      <h2 className="text-2xl font-bold text-slate-800 text-center">Tip Calculator</h2>

      {/* Bill Input */}
      <div className="space-y-2">
        <label className="text-sm font-semibold text-slate-600">Bill Amount ($)</label>
        <input 
          type="number" 
          value={bill}
          onChange={(e) => setBill(e.target.value)}
          placeholder="0.00"
          className="w-full p-3 text-lg border rounded-lg focus:ring-2 focus:ring-green-500 outline-none"
        />
      </div>

      {/* Tip Selector */}
      <div className="space-y-2">
        <label className="text-sm font-semibold text-slate-600">Tip Percentage ({tipPercent}%)</label>
        <div className="flex gap-2">
            {[10, 15, 18, 20, 25].map(pct => (
                <button 
                  key={pct}
                  onClick={() => setTipPercent(pct)}
                  className={`flex-1 py-2 rounded-md font-medium transition ${
                      tipPercent === pct 
                      ? 'bg-green-600 text-white shadow-md' 
                      : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                  }`}
                >
                    {pct}%
                </button>
            ))}
        </div>
        <input 
            type="range" 
            min="0" max="100" 
            value={tipPercent} 
            onChange={(e) => setTipPercent(Number(e.target.value))}
            className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
        />
      </div>

      {/* People Selector */}
      <div className="space-y-2">
        <label className="text-sm font-semibold text-slate-600">Number of People</label>
        <div className="flex items-center gap-4">
            <button 
                onClick={() => setPeople(Math.max(1, people - 1))}
                className="w-10 h-10 bg-slate-100 rounded-full font-bold text-lg hover:bg-slate-200"
            >-</button>
            <span className="font-mono text-xl w-8 text-center">{people}</span>
            <button 
                onClick={() => setPeople(people + 1)}
                className="w-10 h-10 bg-slate-100 rounded-full font-bold text-lg hover:bg-slate-200"
            >+</button>
        </div>
      </div>

      {/* Results Box */}
      <div className="bg-slate-900 text-white p-6 rounded-xl space-y-4">
        <div className="flex justify-between items-center">
            <span className="text-slate-400">Tip Amount</span>
            <span className="text-xl font-mono text-green-400">${results.tip}</span>
        </div>
        <div className="flex justify-between items-center">
            <span className="text-slate-400">Total Bill</span>
            <span className="text-xl font-mono">${results.total}</span>
        </div>
        <div className="h-px bg-slate-700 my-2"></div>
        <div className="flex justify-between items-end">
            <span className="text-slate-400">Per Person</span>
            <span className="text-4xl font-bold text-green-400">${results.perPerson}</span>
        </div>
      </div>
    </div>
  );
}