edbridge-scholars/src/components/lessons/ScaleFactorWidget.tsx

import React, { useState } from "react";

const ScaleFactorWidget: React.FC = () => {
  const [k, setK] = useState(2);

  const unit = 24; // Base size in px
  const size = k * unit;

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200 w-full max-w-3xl">
      <div className="mb-8">
        <label className="flex justify-between font-bold text-slate-700 mb-2">
          Scale Factor (k):{" "}
          <span className="text-indigo-600 text-xl">{k}x</span>
        </label>
        <input
          type="range"
          min="1"
          max="4"
          step="1"
          value={k}
          onChange={(e) => setK(parseInt(e.target.value))}
          className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"
        />
        <div className="flex justify-between text-xs text-slate-400 mt-1 font-mono">
          <span>1x</span>
          <span>2x</span>
          <span>3x</span>
          <span>4x</span>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
        {/* 1D: Length */}
        <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 flex flex-col">
          <h4 className="text-sm font-bold uppercase text-slate-500 mb-4">
            1D: Length
          </h4>
          <div className="flex-1 flex items-center justify-center min-h-[160px]">
            <div
              className="h-3 bg-indigo-500 rounded-full transition-all duration-500 shadow-sm"
              style={{ width: `${k * 20}%` }}
            ></div>
          </div>
          <div className="mt-auto border-t border-slate-200 pt-2">
            <p className="text-slate-500 text-xs">Multiplier</p>
            <p className="text-2xl font-bold text-indigo-700">k = {k}</p>
          </div>
        </div>

        {/* 2D: Area */}
        <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 flex flex-col">
          <h4 className="text-sm font-bold uppercase text-slate-500 mb-4">
            2D: Area
          </h4>
          <div className="flex-1 flex items-center justify-center relative min-h-[160px]">
            {/* Base */}
            <div className="w-8 h-8 border-2 border-emerald-500/30 absolute"></div>
            {/* Scaled */}
            <div
              className="bg-emerald-500 shadow-lg transition-all duration-500 ease-out"
              style={{ width: `${size}px`, height: `${size}px` }}
            ></div>
          </div>
          <div className="mt-auto border-t border-slate-200 pt-2">
            <p className="text-slate-500 text-xs">Multiplier</p>
            <p className="text-2xl font-bold text-emerald-700">k² = {k * k}</p>
          </div>
        </div>

        {/* 3D: Volume */}
        <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 flex flex-col overflow-hidden">
          <h4 className="text-sm font-bold uppercase text-slate-500 mb-4">
            3D: Volume
          </h4>
          <div className="flex-1 flex items-center justify-center perspective-1000 min-h-[160px]">
            <div
              className="relative transform-style-3d transition-all duration-500 ease-out"
              style={{
                width: `${size}px`,
                height: `${size}px`,
                transform: "rotateX(-20deg) rotateY(-30deg)",
              }}
            >
              {/* Faces */}
              {[
                // Front
                { trans: `translateZ(${size / 2}px)`, color: "bg-rose-500" },
                // Back
                {
                  trans: `rotateY(180deg) translateZ(${size / 2}px)`,
                  color: "bg-rose-600",
                },
                // Right
                {
                  trans: `rotateY(90deg) translateZ(${size / 2}px)`,
                  color: "bg-rose-600",
                },
                // Left
                {
                  trans: `rotateY(-90deg) translateZ(${size / 2}px)`,
                  color: "bg-rose-500",
                },
                // Top
                {
                  trans: `rotateX(90deg) translateZ(${size / 2}px)`,
                  color: "bg-rose-400",
                },
                // Bottom
                {
                  trans: `rotateX(-90deg) translateZ(${size / 2}px)`,
                  color: "bg-rose-700",
                },
              ].map((face, i) => (
                <div
                  key={i}
                  className={`absolute inset-0 border border-white/20 ${face.color} shadow-sm`}
                  style={{ transform: face.trans }}
                />
              ))}
            </div>
          </div>
          <div className="mt-auto border-t border-slate-200 pt-2">
            <p className="text-slate-500 text-xs">Multiplier</p>
            <p className="text-2xl font-bold text-rose-700">k³ = {k * k * k}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ScaleFactorWidget;