"use client";

import { useState } from "react";
import { Breadcrumbs } from "@/components/layout/breadcrumbs";
import { BinaryConverterExplorer } from "@/components/explorers/binary-converter-explorer";
import { DenaryToBinaryExplorer } from "@/components/explorers/denary-to-binary-explorer";

type Mode = "binary-to-denary" | "denary-to-binary";

const MODES: { key: Mode; label: string }[] = [
  { key: "binary-to-denary", label: "Binary → Denary" },
  { key: "denary-to-binary", label: "Denary → Binary" },
];

export default function BinaryPage() {
  const [mode, setMode] = useState<Mode>("binary-to-denary");

  return (
    <div className="space-y-8">
      <Breadcrumbs
        items={[
          { label: "Lessons", href: "/lessons" },
          { label: "Unit 6: Number System", href: "/lessons/unit-6-number-system" },
          { label: "Binary" },
        ]}
      />

      <div>
        <h1 className="text-3xl font-bold tracking-tight">
          {mode === "binary-to-denary"
            ? "Binary → Denary Converter"
            : "Denary → Binary Converter"}
        </h1>
        <p className="mt-2 text-muted">
          {mode === "binary-to-denary"
            ? "Same shape, different base — explore place value in powers of 2."
            : "Divide by 2. Track the remainder. Read bottom-up."}
        </p>
      </div>

      <div className="flex flex-wrap gap-2">
        {MODES.map((m) => (
          <button
            key={m.key}
            onClick={() => setMode(m.key)}
            className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
              mode === m.key
                ? "border-unit-6 bg-unit-6 text-white"
                : "border-unit-6/40 text-unit-6 hover:bg-unit-6-light"
            }`}
          >
            {m.label}
          </button>
        ))}
      </div>

      {mode === "binary-to-denary" ? (
        <BinaryConverterExplorer />
      ) : (
        <DenaryToBinaryExplorer />
      )}
    </div>
  );
}
