import { useEffect, useState } from "react";

type FileThumbnailProps = {
  file: File;
  alt?: string;
  className?: string;
};

export default function FileThumbnail({ file, alt, className }: FileThumbnailProps) {
  const [src, setSrc] = useState<string>("");

  useEffect(() => {
    const url = URL.createObjectURL(file);
    setSrc(url);
    return () => {
      URL.revokeObjectURL(url);
    };
  }, [file]);

  return (
    <img
      src={src}
      alt={alt || file.name}
      className={className || "h-12 w-12 rounded object-cover"}
    />
  );
}