"use client";

import { useState } from "react";
import { CheckCircle2 } from "lucide-react";
import { cn } from "@/lib/utils";
import type { StudyMode } from "@/types";

type ModeSelectorProps = {
  modes: StudyMode[];
  defaultMode?: StudyMode;
};

export function ModeSelector({ modes, defaultMode }: ModeSelectorProps) {
  const [selectedMode, setSelectedMode] = useState<StudyMode>(defaultMode ?? modes[0]);

  return (
    <div className="workspace-card p-4">
      <p className="px-1 text-[13px] font-semibold text-[var(--text-primary)]">Choose output mode</p>
      <div className="mt-3 grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
        {modes.map((mode) => {
          const selected = selectedMode === mode;
          return (
            <button
              key={mode}
              type="button"
              onClick={() => setSelectedMode(mode)}
              className={cn(
                "flex min-h-12 items-center justify-between gap-2 rounded-[var(--radius-sm)] border px-3.5 text-left text-[12px] font-semibold transition-all",
                selected
                  ? "border-[var(--accent-primary)] bg-[var(--accent-primary-light)] text-[var(--accent-primary)]"
                  : "border-[var(--border-subtle)] bg-[var(--bg-root)] text-[var(--text-muted)] hover:bg-[var(--bg-hover)]",
              )}
            >
              <span>{mode}</span>
              {selected ? <CheckCircle2 className="size-4 shrink-0" /> : null}
            </button>
          );
        })}
      </div>
    </div>
  );
}