"use client";
import { Skeleton } from "@/components/ui/skeleton";
import { LucideImageDown } from "lucide-react";
import React, { useState } from "react";
interface ImageInterface extends React.ImgHTMLAttributes<HTMLImageElement> {
    src: string,
    alt: string,
    className?: string,
}
const Image = ({ src, alt, className, ...props }: ImageInterface) => {
    const [isLoading, setIsLoading] = useState(true);

    return (
        <>
            {isLoading && (
                <Skeleton className="absolute inset-0 w-full h-full flex justify-center items-center rounded-lg">
                    <LucideImageDown size={35} color="white" />
                </Skeleton>
            )}
            <img
                src={src}
                alt={alt}
                className={`${isLoading ? 'opacity-0' : 'opacity-100'} transition-opacity duration-500 ${className}`}
                onLoad={() => setIsLoading(false)}
                {...props}
            />
        </>
    );
};

export default Image;