"use client";

import clsx from "clsx";

import { Typography } from "@/components/ui";

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

interface MessageTextProps {
  text?: string;
  isOwn: boolean;
  className?: string;
  isBlurred?: boolean;
  onBlurClick?: () => void;
}

export default function MessageText({
  text,
  isOwn,
  className,
  isBlurred = false,
  onBlurClick,
}: MessageTextProps) {
  const handleClick = () => {
    if (isBlurred && onBlurClick) {
      onBlurClick();
    }
  };

  return (
    <div
      onClick={handleClick}
      style={isBlurred ? { cursor: "pointer" } : undefined}
    >
      <Typography
        as="p"
        align="left"
        className={clsx(
          styles.text,
          isOwn ? styles.own : styles.other,
          isBlurred && styles.blurred,
          className
        )}
      >
        {text}
      </Typography>
    </div>
  );
}
