import { useState } from 'react';

interface ExpandableImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  src?: string;
}

export function ExpandableImage({ src, alt, ...props }: ExpandableImageProps) {
  const [expanded, setExpanded] = useState(false);

  const finalSrc = src?.startsWith("https://media") && src.includes(".giphy.com/")
    ? `/api/v1/gifs/proxy?url=${encodeURIComponent(src)}`
    : src;

  return (
    <img
      {...props}
      src={finalSrc}
      alt={alt || "image"}
      onClick={(e) => {
        e.stopPropagation();
        setExpanded(!expanded);
      }}
      className={
        expanded
          ? "max-w-full max-h-[65vh] object-contain rounded my-1 block cursor-zoom-out"
          : "max-w-[240px] max-h-[240px] object-contain rounded my-1 block cursor-zoom-in"
      }
      loading="lazy"
    />
  );
}