import React from "react";
import Styles from "../css/style.module.css";

export default function SpecialChars({ handleCharSelect }) {
  const specialCharacters = [
    "★",
    "❤",
    "☀",
    "✈",
    "♪",
    "✔",
    "⇧",
    "⇩",
    "♠",
    "♣",
    "♥",
    "♦",
    "♪",
    "♫",
    "☎",
    "✉",
    "☂",
    "☔",
    "☕",
    "⚓",
    "⚡",
    "⚠",
    "⚽",
    "⚾",
    "✂",
    "✏",
    "✒",
    "✨",
    "❄",
    "❅",
    "❆",
    "❇",
    "❈",
    "❉",
    "❊",
    "❋",
    "❌",
    "❍",
    "❎",
    "❏",
    "❐",
    "❑",
    "❒",
    "⚪",
    "⚫",
    "◆",
    "◇",
    "◈",
    "◉",
    "◊",
    "○",
    "◌",
    "◍",
    "◎",
    "●",
    "◐",
    "◑",
    "◒",
    "◓",
    "◔",
    "◕",
    "◖",
    "◗",
    "◘",
    "◙",
    "◚",
    "◛",
    "◜",
    "◝",
    "◞",
    "◟",
    "◠",
    "◡",
    "◢",
    "◣",
    "◤",
    "◥",
    "◦",
    "◧",
    "◨",
    "◩",
    "◪",
    "◫",
    "◬",
    "◭",
    "◮",
    "◯",
    "❘",
    "❙",
    "❚",
    "❛",
    "❜",
    "❝",
    "❞",
    "❟",
    "❠",
    "⚀",
    "⚁",
    "⚂",
    "⚃",
    "⚄",
    "⚅",
    "⚆",
    "⚇",
    "⚈",
    "⚉",
    "⚘",
    "⚙",
    "⚚",
    "⚛",
    "⚜",
    "⚝",
    "€",
    "¥",
    "£",
    "₪",
    "₩",
    "₱",
    "₲",
    "₳",
    "₴",
    "₵",
    "₦",
    "₭",
    "₮",
    "₯",
    "₨",
    "₰",
    "&",
    "<",
    ">",
    '"',
    "'",
    "¢",
    "£",
    "¥",
    "€",
    "©",
    "®",
    "™",
    "§",
    "×",
    "÷",
    // Add more special characters as needed
  ];

  return (
    <div className={Styles.specialCharBox}>
      {specialCharacters.map((char, index) => (
        <div
          key={`key${index}`}
          onClick={(e) => handleCharSelect(e, char)}
          className={Styles.specialChar}
        >
          {char}
        </div>
      ))}
    </div>
  );
}