import SmallAddPluse from "@/assets/icons/SmallAddPluse";
import { EmojiIcons } from "@icons/EmojiIocns";
import { Box, IconButton, useTheme } from "@mui/material";
import { MouseEventHandler } from "react";

export default function VariantAdornmentMobile({
  onClick,
  extendedText,
  clearEmoji
}: {
  onClick: MouseEventHandler<HTMLDivElement>;
  extendedText: string;
  clearEmoji: () => void;
}) {
  const theme = useTheme();

  return (
    <Box
      onClick={onClick}
      sx={{
        display: "flex",
        alignItems: "center",
        m: "8px",
        position: "relative",
      }}
    >
      <Box
        sx={{
          width: "100%",
          background: "#EEE4FC",
          height: "40px",
        }}
      />
      {extendedText ? (
        <Box
          sx={{
            position: "absolute",
            color: "#7E2AEA",
            fontSize: "20px",
            left: "45%",
            right: "55%",
          }}
        >
          {extendedText}
        </Box>
      ) : (
        <EmojiIcons
          style={{
            position: "absolute",
            color: "#7E2AEA",
            fontSize: "20px",
            left: "45%",
            right: "55%",
          }}
        />
      )}
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          width: "20px",
          background: "#EEE4FC",
          height: "40px",
          color: "white",
          backgroundColor: "#7E2AEA",
        }}
      >
        <IconButton
          onClick={clearEmoji}
          sx={{
            height: "100%",
            width: "20px",
            borderRadius: "0 3px 3px 0",
            bgcolor: theme.palette.brightPurple.main
          }}>
          <SmallAddPluse
            sx={{
              transform: extendedText ? "rotate(45deg)" : ""
            }}
          />
        </IconButton>
      </Box>
    </Box>
  );
}
