import React from 'react';

interface AlphabetFilterProps {
  activeLetter: string;
  onSelectLetter: (letter: string) => void;
}

export function AlphabetFilter({ activeLetter, onSelectLetter }: AlphabetFilterProps) {
  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

  return (
    <div className="w-full overflow-x-auto pb-2 mb-6 scrollbar-hide">
      <div className="flex gap-1.5 min-w-max px-6 max-w-5xl mx-auto">
        <button
          onClick={() => onSelectLetter('')}
          className={`px-3 py-1.5 rounded-lg font-semibold text-xs transition-colors ${
            activeLetter === '' 
              ? 'bg-gray-800 text-white' 
              : 'bg-white text-gray-500 hover:bg-gray-100 border border-gray-200'
          }`}
        >
          Semua
        </button>
        {letters.map((letter) => (
          <button
            key={letter}
            onClick={() => onSelectLetter(letter)}
            className={`w-8 h-8 flex items-center justify-center rounded-lg font-semibold text-xs transition-colors ${
              activeLetter === letter 
                ? 'bg-gray-800 text-white' 
                : 'bg-white text-gray-500 hover:bg-gray-100 border border-gray-200'
            }`}
          >
            {letter}
          </button>
        ))}
      </div>
    </div>
  );
}