import React from "react";
import { useTranslation } from "react-i18next";
import { RemoveButton } from "#/components/shared/buttons/remove-button";
import { I18nKey } from "#/i18n/declaration";
import { ImageLightbox } from "./image-lightbox";
import { Thumbnail } from "./thumbnail";

interface ImagePreviewProps {
  src: string;
  onRemove?: () => void;
  size?: "small" | "large";
}

export function ImagePreview({
  src,
  onRemove,
  size = "small",
}: ImagePreviewProps) {
  const { t } = useTranslation("openhands");
  const [isExpanded, setIsExpanded] = React.useState(false);

  return (
    <div data-testid="image-preview" className="relative w-fit shrink-0 py-1">
      <button
        type="button"
        data-testid="expand-image-button"
        aria-label={t(I18nKey.BUTTON$VIEW_FULL_SIZE_IMAGE)}
        onClick={() => setIsExpanded(true)}
        className="block cursor-zoom-in rounded-sm transition-opacity hover:opacity-80"
      >
        <Thumbnail src={src} size={size} />
      </button>
      {onRemove && (
        <RemoveButton
          onClick={onRemove}
          aria-label={t(I18nKey.BUTTON$REMOVE_IMAGE)}
          className="absolute right-[3px] top-[3px] cursor-pointer"
        />
      )}
      {isExpanded && (
        <ImageLightbox src={src} onClose={() => setIsExpanded(false)} />
      )}
    </div>
  );
}