import React, { useState } from 'react';

const RadicalWidget: React.FC = () => {
  const [power, setPower] = useState(3);
  const [root, setRoot] = useState(2);

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center mb-8">
            <div className="space-y-6">
                <div>
                    <label className="text-xs font-bold text-violet-600 uppercase mb-1 block">Power (Numerator) m</label>
                    <div className="flex items-center gap-4">
                        <input 
                          type="range" min="1" max="9" value={power} onChange={e => setPower(parseInt(e.target.value))} 
                          className="flex-1 h-2 bg-violet-100 rounded-lg accent-violet-600"
                        />
                        <span className="font-mono font-bold text-violet-800 text-xl">{power}</span>
                    </div>
                </div>
                <div>
                    <label className="text-xs font-bold text-fuchsia-600 uppercase mb-1 block">Root (Denominator) n</label>
                    <div className="flex items-center gap-4">
                        <input 
                          type="range" min="2" max="9" value={root} onChange={e => setRoot(parseInt(e.target.value))} 
                          className="flex-1 h-2 bg-fuchsia-100 rounded-lg accent-fuchsia-600"
                        />
                        <span className="font-mono font-bold text-fuchsia-800 text-xl">{root}</span>
                    </div>
                </div>
            </div>

            <div className="flex flex-col items-center justify-center p-6 bg-slate-50 rounded-xl border border-slate-200 min-h-[160px]">
                <div className="flex items-center gap-8 text-4xl font-serif">
                    {/* Rational Exponent Form */}
                    <div className="text-center group">
                        <span className="font-bold text-slate-700 italic">x</span>
                        <sup className="text-2xl font-sans font-bold">
                            <span className="text-violet-600 group-hover:scale-110 inline-block transition-transform">{power}</span>
                            <span className="text-slate-400 mx-1">/</span>
                            <span className="text-fuchsia-600 group-hover:scale-110 inline-block transition-transform">{root}</span>
                        </sup>
                    </div>

                    <span className="text-slate-300">=</span>

                    {/* Radical Form */}
                    <div className="text-center relative group">
                        <span className="absolute -top-3 -left-3 text-lg font-bold text-fuchsia-600 font-sans group-hover:scale-110 transition-transform">{root}</span>
                        <span className="text-slate-400">√</span>
                        <span className="border-t-2 border-slate-400 px-1 font-bold text-slate-700 italic">
                            x
                            <sup className="text-violet-600 text-2xl font-sans ml-0.5 group-hover:scale-110 inline-block transition-transform">{power}</sup>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div className="text-sm text-slate-600 bg-indigo-50 p-4 rounded-lg border border-indigo-100">
            <p className="mb-2"><strong>The Golden Rule:</strong> The top number stays with x (power), the bottom number becomes the root.</p>
            <p className="font-mono">
                Exponent <span className="text-violet-600 font-bold">{power}</span> goes inside. 
                Root <span className="text-fuchsia-600 font-bold">{root}</span> goes outside.
            </p>
        </div>
    </div>
  );
};

export default RadicalWidget;