import React, { useState } from 'react';

const AlphabetPaginationNumber = ({ letter, active, onClick }) => (
  <button
    className={`w-8 h-8 flex items-center justify-center rounded ${
      active
        ? 'bg-emerald-500 text-white'
        : 'text-gray-600 bg-gray-200 hover:bg-gray-50'
    }`}
    onClick={onClick}
  >
    {letter}
  </button>
);

const AlphabetLinks = ({ filter, onLetterClick }) => {
  const [currentLetter, setCurrentLetter] = useState(filter);
  const alphabet = '*ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

  return (
    <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
      <div className="flex items-center gap-2">
        {alphabet.map((letter) => (
          <AlphabetPaginationNumber
            key={letter}
            letter={letter}
            active={currentLetter === letter}
            onClick={() => {
              setCurrentLetter(letter);
              onLetterClick(letter);
            }}
          />
        ))}
      </div>
    </div>
  );
};

export default AlphabetLinks;