import "emoji-mart/css/emoji-mart.css"
import type { EmojiData } from "emoji-mart"
import { Picker } from "emoji-mart"
import { useTheme } from "next-themes"

import { EMOJI_SET } from "../emojiPlugin"

export type EmojiPickerOnClick = (
  emoji: EmojiData,
  event: React.MouseEvent<HTMLElement, MouseEvent>,
) => void

export interface EmojiPickerProps {
  onClick?: EmojiPickerOnClick
}

export const EmojiPicker: React.FC<EmojiPickerProps> = (props) => {
  const { theme } = useTheme()

  return (
    <Picker
      set={EMOJI_SET}
      theme={theme as "light" | "dark" | "auto"}
      onClick={props.onClick}
      showPreview={false}
      showSkinTones={false}
    />
  )
}