import { useEffect, useRef } from "react";

const EMOJIS = ["👍", "❤️", "😂", "😮", "😢", "🔥", "👏", "🎉"];

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

export default function EmojiPicker({ onSelect, onClose, className }: Props) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleOutside(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
    }
    document.addEventListener("mousedown", handleOutside);
    return () => document.removeEventListener("mousedown", handleOutside);
  }, [onClose]);

  return (
    <div
      ref={ref}
      className={[
        "flex items-center gap-1 rounded-2xl border border-brand-lines/20 bg-brand-bg/95 px-2 py-1.5 shadow-xl backdrop-blur-sm",
        className,
      ].join(" ")}
    >
      {EMOJIS.map((e) => (
        <button
          key={e}
          type="button"
          onClick={() => { onSelect(e); onClose(); }}
          className="text-xl leading-none transition-transform hover:scale-125 active:scale-110"
        >
          {e}
        </button>
      ))}
    </div>
  );
}
