import { Card, CardContent } from "../ui/card";

// Emoji Picker component
const EmojiPicker = ({
  onSelectEmoji,
}: {
  onSelectEmoji: (emoji: string) => void;
}) => {
  // Common emojis array
  const emojis = [
    "😊",
    "😂",
    "❤️",
    "👍",
    "😍",
    "🙏",
    "😭",
    "😘",
    "🥰",
    "😁",
    "🔥",
    "😅",
    "🤔",
    "☺️",
    "🥺",
    "🎉",
    "✨",
    "👏",
    "👌",
    "😉",
    "🤗",
    "💕",
    "😎",
    "🙄",
    "😋",
    "😀",
    "😆",
    "😃",
    "😄",
    "🤣",
    "😇",
    "🤩",
    "😒",
    "🙂",
    "😳",
    "😌",
    "🥳",
    "😔",
    "😢",
    "😡",
    "🤬",
    "😱",
    "👋",
    "🤞",
    "💯",
    "🙈",
  ];

  return (
    <Card className="w-full p-0 border-0 shadow-none ">
      <CardContent>
        <div
          className="grid p-2 grid-cols-8 gap-1 max-h-[180px] hide-scrollbar overflow-y-auto"
          style={{ direction: "rtl" }}
        >
          {emojis.map((emoji, index) => (
            <button
              key={index}
              onClick={() => onSelectEmoji(emoji)}
              className="text-xl hover:bg-WHITE3 rounded  transition-colors"
            >
              {emoji}
            </button>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};
export default EmojiPicker;