import { useAuthedFileUrl } from '../../lib/authedFile';

interface Props {
  src: string;
  alt?: string;
  className?: string;
  onClick?: () => void;
}

/**
 * An `<img>` for `/api/files/*` attachments. The file is fetched with the auth token
 * (see `useAuthedFileUrl`) and rendered from a blob URL, because a native `<img src>`
 * request can't carry the Bearer token that `/api/files` now requires. While the fetch
 * is in flight (or if it failed) a subtle pulsing placeholder is shown in its place so
 * the layout doesn't jump.
 */
export default function AuthedImage({ src, alt, className, onClick }: Props) {
  const resolvedSrc = useAuthedFileUrl(src);

  if (!resolvedSrc) {
    return <div className={`${className ?? ''} bg-white/10 animate-pulse`} onClick={onClick} />;
  }

  return <img src={resolvedSrc} alt={alt} className={className} onClick={onClick} />;
}
