import { useState, useEffect } from "react";

const FeaturedImage = ({ productId }) => {

    const [imageSrc, setImageSrc] = useState(null);

    useEffect(() => {
        fetch(`https://localhost:7292/api/Image?id=${productId}`)
            .then(response => response.blob())
            .then(blob => {
                const imageUrl = URL.createObjectURL(blob);
                setImageSrc(imageUrl);
            })
    }, []);


    return (
        <>
            {!imageSrc ?
                <div
                    className="cat-load" /> :

                <img
                    className="featured-img"
                    src={imageSrc}
                    alt={productId + "_image"}
                />
            }


        </>
    );
}

export default FeaturedImage;