"use client";

import { useState } from "react";

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

const EMOJI_CATEGORIES: { label: string; emojis: string[] }[] = [
  {
    label: "Frecuentes",
    emojis: ["😀", "😂", "🥰", "😎", "🤔", "😢", "👍", "👎", "👏", "🙏", "🔥", "❤️", "🎉", "💯", "🚀"],
  },
  {
    label: "Gestos",
    emojis: ["👌", "🤝", "✌️", "🤞", "👀", "💪", "🫶", "👋", "🤙", "🙌"],
  },
  {
    label: "Objetos",
    emojis: ["☕", "🍕", "🍻", "📈", "⭐", "✅", "❌", "⚡", "💡", "📌"],
  },
];

export function EmojiPicker({ onSelect, onClose }: EmojiPickerProps) {
  const [activeCategory, setActiveCategory] = useState(0);

  return (
    <div className="absolute bottom-full mb-2 right-0 z-50 w-72 bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden">
      {/* Header */}
      <div className="flex border-b border-gray-100">
        {EMOJI_CATEGORIES.map((cat, i) => (
          <button
            key={cat.label}
            onClick={() => setActiveCategory(i)}
            className={`flex-1 px-2 py-2 text-xs font-medium transition-colors ${
              activeCategory === i
                ? "text-slack-purple border-b-2 border-slack-purple"
                : "text-gray-400 hover:text-gray-600"
            }`}
          >
            {cat.label}
          </button>
        ))}
      </div>

      {/* Emoji grid */}
      <div className="p-2 max-h-48 overflow-y-auto">
        <div className="grid grid-cols-8 gap-0.5">
          {EMOJI_CATEGORIES[activeCategory].emojis.map((emoji) => (
            <button
              key={emoji}
              onClick={() => {
                onSelect(emoji);
                onClose?.();
              }}
              className="w-8 h-8 flex items-center justify-center text-xl rounded hover:bg-gray-100 transition-colors"
            >
              {emoji}
            </button>
          ))}
        </div>
      </div>

      {/* Footer */}
      <div className="px-3 py-1.5 border-t border-gray-100 text-xs text-gray-400">
        Selecciona un emoji
      </div>
    </div>
  );
}