import { CheckCircle2, Circle } from 'lucide-react'

interface VocabSidebarProps {
    vocab: { word: string; translation: string }[]
    solvedWords: string[]
}

export const VocabSidebar = ({ vocab, solvedWords }: VocabSidebarProps) => {
    return (
        <div className="w-full h-full bg-card border-r flex flex-col">
            <div className="p-4 border-b">
                <h3 className="font-bold text-lg">Vocabulary</h3>
                <p className="text-xs text-muted-foreground">
                    {solvedWords.length} / {vocab.length} words mastered
                </p>
            </div>
            <div className="flex-1 overflow-y-auto">
                <div className="p-4 space-y-4">
                    {vocab.map((item, idx) => {
                        const isSolved = solvedWords.includes(item.word.toLowerCase())
                        return (
                            <div key={idx} className={`text-sm flex flex-col gap-1 p-2 rounded-lg transition-colors ${isSolved ? 'bg-accent/10' : ''}`}>
                                <div className="flex items-center justify-between font-medium">
                                    <span>{item.word}</span>
                                    {isSolved ? (
                                        <CheckCircle2 className="w-4 h-4 text-green-500" />
                                    ) : (
                                        <Circle className="w-3 h-3 text-muted-foreground/30" />
                                    )}
                                </div>
                                <span className="text-muted-foreground text-xs">{item.translation}</span>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    )
}
