import React from 'react';
import { FocusableItem } from './FocusableItem';

export const AlphabetScroller = ({ 
  letters, 
  onLetterPress 
}: { 
  letters: string[], 
  onLetterPress: (letter: string) => void 
}) => {
  return (
    <div className="w-10 flex flex-col items-center justify-center py-8 bg-black/40 border-l border-white/5 gap-2 select-none">
      {letters.map(letter => (
        <FocusableItem 
          key={letter}
          onFocus={() => {}} 
          onEnterPress={() => onLetterPress(letter)}
          onClick={() => onLetterPress(letter)}
          className="w-full flex justify-center py-1"
          focusKey={`LETTER_${letter}`}
          scrollOptions={{ behavior: 'smooth', block: 'center' }}
        >
          {(focused) => (
            <div className={`text-[0.8125rem] font-black geist-mono transition-all duration-200 
              ${focused ? 'text-[#2563eb] scale-125' : 'text-white/30 hover:text-white/70'}`}
            >
              {letter}
            </div>
          )}
        </FocusableItem>
      ))}
    </div>
  );
};
