import Image from "next/image";

import { Typography, TypographyProps } from "@/components/ui";
import { emailMarketingCompV1Images } from "@/shared/constants/images";

import styles from "./TextWithEmoji.module.scss";

interface TextWithEmojiProps {
  text: string;
  emoji: string;
  emojiWidth?: number;
  emojiHeight?: number;
  color?: TypographyProps["color"];
}

export default function TextWithEmoji({
  text,
  emoji,
  emojiWidth = 23,
  emojiHeight = 23,
  color = "default",
}: TextWithEmojiProps) {
  return (
    <div className={styles.container}>
      <Image
        src={emailMarketingCompV1Images(emoji)}
        alt={emoji}
        width={emojiWidth}
        height={emojiHeight}
      />
      <Typography as="p" align="left" className={styles.text} color={color}>
        {text}
      </Typography>
    </div>
  );
}
