import React from 'react';
import '../../styles/ui.css';

const EMOJI_CATEGORIES = {
  "😀 🎮": ["😀", "😎", "🤖", "👾", "🎮", "✨", "🚀", "💫"],
  "🌟 💫": ["⭐", "🌟", "💫", "✨", "⚡", "💥", "🔥", "🌈"],
  "🤖 🎯": ["🤖", "🎯", "🎲", "🎮", "🕹️", "👾", "💻", "⌨️"]
};

export function EmojiPicker({ visible, onClose, onEmojiSelect }: {
  visible: boolean;
  onClose: () => void;
  onEmojiSelect: (emoji: string) => void;
}) {
  if (!visible) return null;

  return (
    <div className="emoji-picker-modal">
      <div className="emoji-picker-header">
        <h3>Select Emoji</h3>
        <button onClick={onClose} className="close-button">
          <svg viewBox="0 0 24 24">
            <path d="M18 6L6 18M6 6l12 12"/>
          </svg>
        </button>
      </div>
      
      <div className="emoji-picker-content">
        {Object.entries(EMOJI_CATEGORIES).map(([category, emojis]) => (
          <div key={category} className="emoji-category">
            <h4 className="category-title">{category}</h4>
            <div className="emoji-grid">
              {emojis.map(emoji => (
                <button
                  key={emoji}
                  className="emoji-button"
                  onClick={() => {
                    onEmojiSelect(emoji);
                    onClose();
                  }}
                >
                  {emoji}
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
