import { useState } from 'react';

const EMOJI_LIST = [
  '👍', '❤️', '😂', '😮', '😢', '😡', '🎉', '🔥',
  '👀', '💯', '✨', '🙏', '💀', '🤡', '🤔', '😎',
  '🫡', '🫠', '🤯', '🥳', '😴', '🤮', '👻', '🎃',
  '🚀', '⭐', '🌈', '🍕', '🍺', '☕', '🎮', '🎵',
];

interface EmojiPickerProps {
  onSelect: (emoji: string) => void;
  onClose: () => void;
}

export function EmojiPicker({ onSelect, onClose }: EmojiPickerProps) {
  const [search, setSearch] = useState('');

  const filtered = search
    ? EMOJI_LIST.filter(e => e.includes(search))
    : EMOJI_LIST;

  return (
    <div className="absolute bottom-full left-0 mb-1 bg-gb-bg border border-gb-bg-t p-2 min-w-[200px] z-50">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs text-gb-fg-f font-mono">EMOJI</span>
        <button onClick={onClose} className="text-xs text-gb-red font-mono">[x]</button>
      </div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="search..."
        className="w-full px-2 py-1 mb-2 text-xs font-mono bg-gb-bg-s text-gb-fg border-none outline-none"
        autoFocus
      />
      <div className="grid grid-cols-8 gap-1">
        {filtered.map((emoji) => (
          <button
            key={emoji}
            onClick={() => {
              onSelect(emoji);
              onClose();
            }}
            className="w-6 h-6 flex items-center justify-center text-sm hover:bg-gb-bg-s transition-colors"
          >
            {emoji}
          </button>
        ))}
      </div>
      {filtered.length === 0 && (
        <div className="text-xs text-gb-fg-f font-mono text-center py-2">[no results]</div>
      )}
    </div>
  );
}
