import { useState, useEffect } from 'react'

const AVATARS = [
  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
  '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
  '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
  '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '😣', '😖', '😫',
  '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳',
  '🥵', '🥶', '😱', '😨', '😰', '😥', '😢', '🤔', '🤫', '🤭',
  '🤗', '🤑', '🤠', '🤢', '🤮', '🤧', '🥵', '🥶', '👍', '👎'
]

export default function AvatarSelector({ selectedAvatar, onSelect }) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="text-4xl hover:scale-110 transition-transform"
        title="Selecionar avatar"
      >
        {selectedAvatar || '👤'}
      </button>
      
      {isOpen && (
        <div className="absolute top-12 right-0 bg-white border rounded-lg shadow-lg p-3 z-50 w-64">
          <div className="grid grid-cols-10 gap-2 max-h-48 overflow-y-auto">
            {AVATARS.map((avatar, index) => (
              <button
                key={index}
                onClick={() => {
                  onSelect(avatar)
                  setIsOpen(false)
                }}
                className={`text-xl hover:scale-125 transition-transform ${
                  selectedAvatar === avatar ? 'ring-2 ring-blue-500 rounded' : ''
                }`}
              >
                {avatar}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}