// @ts-ignore
import React, { memo } from "react";
import Image from "next/image";
// import twemoji from "twemoji"
const Emoji = ({
  element = "",
  parentSize = "100%",
  childSize = "50%",
  alignCenter = true,
  useCode = false,
  alt
}: props) => {
  const unicodeValue = element.charCodeAt(0);
  const hexString = unicodeValue.toString(16);
  return (
    <div
      className={"relative"}
      style={{
        width: parentSize,
        height: parentSize,
        display: alignCenter ? "grid" : "flex",
        placeItems: alignCenter ? "center" : "start",
      }}
    >
      <span
        style={{ width: childSize, height: childSize, position: "relative" }}
      >
        <Image
          src={`/assets/emojis/${useCode ? hexString : element.toLowerCase()}.svg`}
          layout="fill"
          alt={alt || element}
        />
      </span>
    </div>
  );
};
interface props {
  element: string;
  parentSize?: string | number;
  childSize?: string | number;
  alignCenter?: boolean;
  useCode?: boolean;
  alt?: string
}
export default memo(Emoji);