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;