//
"use client";

import React from "react";
import {
  TextSelect,
  Combine,
  WholeWord,
  Highlighter,
  Atom,
  Mic2,
  CheckCircle2,
} from "lucide-react";

// --- Granularity Definition ---
export const GRANULARITY_LEVELS = [
  { id: "text", name: "Text", icon: TextSelect },
  { id: "paragraph", name: "Paragraph", icon: Combine },
  { id: "sentence", name: "Sentence", icon: Highlighter },
  { id: "clause", name: "Clause (Sentence Lvl)", icon: Highlighter },
  { id: "word", name: "Word/Token", icon: WholeWord },
  { id: "syllable", name: "Syllable (Word Lvl)", icon: Mic2 },
  { id: "phoneme", name: "Phoneme (Word Lvl)", icon: Atom },
] as const;
export type GranularityId = (typeof GRANULARITY_LEVELS)[number]["id"];

// --- Granularity Menu ---
interface GranularityMenuProps {
  selectedGranularity: GranularityId;
  onSelectGranularity: (granularity: GranularityId) => void;
}
const GranularityMenu: React.FC<GranularityMenuProps> = ({
  selectedGranularity,
  onSelectGranularity,
}) => (
  <nav className="w-full bg-slate-800 text-slate-100 p-4 space-y-2 rounded-lg shadow-lg">
    <h2 className="text-lg font-semibold text-sky-400 mb-4">
      Granularity Level
    </h2>
    {GRANULARITY_LEVELS.map((level) => {
      const Icon = level.icon;
      const isSelected = selectedGranularity === level.id;
      return (
        <button
          key={level.id}
          onClick={() => onSelectGranularity(level.id)}
          className={`w-full flex items-center space-x-3 p-3 rounded-md text-left transition-all duration-150 ease-in-out
                      ${isSelected ? "bg-sky-500 text-white shadow-md scale-105" : "hover:bg-slate-700 hover:text-sky-300"}`}
        >
          <Icon
            size={20}
            className={`${isSelected ? "text-white" : "text-sky-400"}`}
          />
          <span>{level.name}</span>
          {isSelected && (
            <CheckCircle2 size={18} className="ml-auto text-white" />
          )}
        </button>
      );
    })}
  </nav>
);

export default GranularityMenu;