import { Fragment } from "react";
import { Chip, Text } from "@siteground/styleguide";
import "./styles.scss";
import { useGetImage } from "@/chat/hooks/use-get-image";
import { translate } from "i18n-calypso";

interface ImagePreviewProps {
  imageUrl: string;
  alt: string;
  generatedBy?: string;
  className?: string;
}

export const ImagePreview = ({ imageUrl, alt, generatedBy, className }: ImagePreviewProps) => {
  const { image, isLoading } = useGetImage(imageUrl);

  return (
    <>
      {!isLoading && (
        <div className="general-image-preview-container">
          {image ? (
            <Fragment>
              <img src={image} alt={alt} className={className} />
              {generatedBy && <Text>{`Generated by ${generatedBy || "IMAGEN 3"}`}</Text>}
            </Fragment>
          ) : (
            <Chip leadingIcon="material/image" size="medium" color="secondary" className="override-icon" disabled>
              <Text italic color="typography-tertiary" className="chip__text">
                {translate("Image had been deleted")}
              </Text>
            </Chip>
          )}
        </div>
      )}
    </>
  );
};