import { useState, useEffect } from "react";

const usePublicImage = (imageName: string) => {
	const [imageUrl, setImageUrl] = useState<string | null>(null);

	useEffect(() => {
		const loadImage = async () => {
			try {
				const response = await fetch(`/${imageName}`);
				if (!response.ok) {
					throw new Error(`HTTP error! status: ${response.status}`);
				}
				const blob = await response.blob();
				const url = URL.createObjectURL(blob);
				setImageUrl(url);
			} catch (error) {
				console.error("Error loading image:", error);
				setImageUrl(null);
			}
		};

		loadImage();

		return () => {
			if (imageUrl) {
				URL.revokeObjectURL(imageUrl);
			}
		};
	}, [imageName]);

	return { imageUrl };
};

export default usePublicImage;