import React from "react";
import EmojiPicker from "emoji-picker-react";
import { Popover } from "@mui/material";

const TableChatEmojiPicker = ({ open, onClose, onEmojiClick, anchorEl }) => {
  const handleEmojiClick = (emojiObject) => {
    onEmojiClick?.(emojiObject.emoji);
  };

  return (
    <Popover
      open={open}
      onClose={onClose}
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: "top",
        horizontal: "left",
      }}
      transformOrigin={{
        vertical: "bottom",
        horizontal: "left",
      }}
    >
      <div style={{ padding: "8px" }}>
        <EmojiPicker onEmojiClick={handleEmojiClick} width={350} height={400} />
      </div>
    </Popover>
  );
};

export default TableChatEmojiPicker;
