import React, { useState } from 'react';
import { ArrowRight } from 'lucide-react';

const UnitConversionWidget: React.FC = () => {
  const [speed, setSpeed] = useState(60); // miles per hour

  // Steps
  const ftPerMile = 5280;
  const secPerHour = 3600;
  
  const ftPerHour = speed * ftPerMile;
  const ftPerSec = ftPerHour / secPerHour;

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
       <div className="mb-8">
           <label className="text-sm font-bold text-slate-500 uppercase">Speed (mph)</label>
           <div className="flex items-center gap-4 mt-2">
               <input 
                 type="range" min="10" max="100" step="5" value={speed} 
                 onChange={e => setSpeed(Number(e.target.value))}
                 className="flex-1 h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-amber-600"
               />
               <span className="font-mono font-bold text-2xl text-slate-800 w-20 text-right">{speed}</span>
           </div>
       </div>

       <div className="space-y-6">
           {/* Step 1: Write initial */}
           <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-lg border border-slate-200 overflow-x-auto">
               <div className="flex flex-col items-center">
                   <span className="font-bold text-lg text-slate-800">{speed} miles</span>
                   <div className="w-full h-0.5 bg-slate-800 my-1"></div>
                   <span className="font-bold text-lg text-slate-800">1 hour</span>
               </div>
               
               <span className="text-slate-400 font-bold">×</span>

               <div className="flex flex-col items-center">
                   <span className="font-bold text-lg text-emerald-600">5280 feet</span>
                   <div className="w-full h-0.5 bg-emerald-600 my-1"></div>
                   <span className="font-bold text-lg text-rose-600 line-through decoration-2">1 mile</span>
               </div>

               <span className="text-slate-400 font-bold">×</span>

               <div className="flex flex-col items-center">
                   <span className="font-bold text-lg text-slate-800 line-through decoration-2 decoration-rose-600">1 hour</span>
                   <div className="w-full h-0.5 bg-slate-800 my-1"></div>
                   <span className="font-bold text-lg text-emerald-600">3600 sec</span>
               </div>

               <ArrowRight className="w-6 h-6 text-slate-400 shrink-0" />

               <div className="flex flex-col items-center bg-white px-4 py-2 rounded shadow-sm border border-emerald-200">
                   <span className="font-bold text-xl text-emerald-700">{ftPerSec.toFixed(1)} ft</span>
                   <div className="w-full h-0.5 bg-emerald-700 my-1"></div>
                   <span className="font-bold text-xl text-emerald-700">1 sec</span>
               </div>
           </div>
           
           <div className="text-sm text-slate-500">
               <p><strong className="text-rose-600">Red units</strong> cancel out (top and bottom).</p>
               <p><strong className="text-emerald-600">Green units</strong> remain.</p>
           </div>
       </div>
    </div>
  );
};

export default UnitConversionWidget;