import React from "react";
import { ArrowLeft } from "lucide-react";
import UnitConversionWidget from "../../../components/lessons/UnitConversionWidget";
import Quiz from "../../../components/lessons/Quiz";
import { RATIOS_QUIZ_DATA } from "../../../utils/constants";

interface LessonProps {
  onFinish?: () => void;
}

const RatiosLesson: React.FC<LessonProps> = ({ onFinish }) => {
  return (
    <div className="flex flex-col min-h-screen">
      <div className="flex-1 max-w-4xl mx-auto p-6 md:p-12 w-full">
        <section className="mb-16">
          <h2 className="text-4xl font-extrabold text-slate-900 mb-6">
            Unit Conversions
          </h2>
          <div className="prose prose-slate text-lg text-slate-600 mb-8">
            <p>
              The secret to unit conversions is{" "}
              <strong>Dimensional Analysis</strong>. Multiply by fractions equal
              to 1 (like 5280 ft / 1 mile) such that the units you don't want
              cancel out.
            </p>
          </div>

          <UnitConversionWidget />
        </section>

        <section className="mb-16">
          <h2 className="text-4xl font-extrabold text-slate-900 mb-8">
            Practice Time
          </h2>
          {RATIOS_QUIZ_DATA.map((quiz, idx) => (
            <div key={quiz.id} className="mb-12">
              <Quiz data={quiz} />
            </div>
          ))}
        </section>

        <div className="flex justify-center mb-12">
          <button
            onClick={onFinish}
            className="flex items-center gap-2 px-8 py-4 bg-amber-600 text-white rounded-full font-bold hover:bg-amber-700 transition-colors shadow-lg"
          >
            <ArrowLeft className="w-5 h-5" /> Back to Course List
          </button>
        </div>
      </div>
    </div>
  );
};

export default RatiosLesson;
