"use client";

import { useState } from "react";
import Image from "next/image";
import { useTranslations } from "next-intl";
import clsx from "clsx";

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

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

interface MessageImageProps {
  src: string;
  alt?: string;
}

export default function MessageImage({ src, alt = "" }: MessageImageProps) {
  const t = useTranslations("Chat");

  // const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  return (
    <div
      className={clsx(
        styles.imageWrapper,
        // loading && styles.loading,
        error && styles.error
      )}
    >
      {!error ? (
        <>
          <Image
            src={src}
            alt={alt}
            fill
            className={styles.bgImage}
            draggable={false}
            priority={false}
          />
          <Image
            src={src}
            alt={alt}
            width={220}
            height={220}
            className={styles.image}
            // onLoad={() => setLoading(false)}
            onError={() => setError(true)}
            loading="lazy"
          />
        </>
      ) : (
        <Typography size="sm" className={styles.fallback}>
          {t("message_image_fallback")}
        </Typography>
      )}
      {/* {loading && <Spinner className={styles.spinner} />} */}
    </div>
  );
}
