"use client";

import EmojiPicker, { Theme as EmojiTheme, EmojiStyle, EmojiClickData } from "emoji-picker-react";
import { useTheme } from "@/lib/theme-context";
import { useClickOutside } from "@/lib/use-click-outside";

export function EmojiPickerPopover({
  onSelect,
  onClose,
  className = "",
  height = 360,
}: {
  onSelect: (emoji: string) => void;
  onClose: () => void;
  className?: string;
  height?: number;
}) {
  const { theme } = useTheme();
  const ref = useClickOutside<HTMLDivElement>(true, onClose);

  return (
    <div ref={ref} className={className}>
      <EmojiPicker
        theme={theme === "dark" ? EmojiTheme.DARK : EmojiTheme.LIGHT}
        onEmojiClick={(data: EmojiClickData) => onSelect(data.emoji)}
        // Native rendering uses the browser/OS's own emoji font instead of
        // fetching ~250 individual PNGs from a CDN on every open — instant,
        // no external dependency, and it matches how the emoji actually
        // looks once posted (everywhere else in the app renders raw unicode
        // emoji natively, so an "Apple style" image in the picker preview
        // would look different from the real thing once inserted).
        emojiStyle={EmojiStyle.NATIVE}
        autoFocusSearch={false}
        // The search box is hidden — the category strip is enough for
        // picking a reaction quickly, and it keeps the panel compact.
        searchDisabled
        width="100%"
        height={height}
        previewConfig={{ showPreview: false }}
      />
    </div>
  );
}