import type { RefObject, KeyboardEvent } from "react"; import { MaterialIcon } from "@/components/ui/MaterialIcon"; interface FloatingNavProps { questions: Array<{ id: string }>; activeQuestionId: string | null; answers: Record; markedQuestions: Set; onGoToQuestion: (qId: string) => void; onScrollToTop: () => void; navSliderRef?: RefObject; } export function FloatingNav({ questions, activeQuestionId, answers, markedQuestions, onGoToQuestion, onScrollToTop, navSliderRef, }: FloatingNavProps) { const isAnswered = (qId: string) => !!answers[qId]; const isMarked = (qId: string) => markedQuestions.has(qId); const handleKeyDown = (e: KeyboardEvent) => { if (questions.length === 0) return; const activeIdx = questions.findIndex((q) => q.id === activeQuestionId); if (e.key === "ArrowRight") { e.preventDefault(); const next = Math.min(questions.length - 1, Math.max(0, activeIdx) + 1); onGoToQuestion(questions[next].id); } else if (e.key === "ArrowLeft") { e.preventDefault(); const prev = Math.max(0, Math.max(0, activeIdx) - 1); onGoToQuestion(questions[prev].id); } else if (e.key === "Home") { e.preventDefault(); onGoToQuestion(questions[0].id); } else if (e.key === "End") { e.preventDefault(); onGoToQuestion(questions[questions.length - 1].id); } }; return ( ); }