import React, { useState } from 'react';
import { Skeleton } from "@/components/ui/skeleton";
import Image, { ImageProps } from 'next/image';

interface OptimizedImageProps extends ImageProps {
    skeletonClassName?: string;
    onImageLoad?: () => void;
    containerClassName?: string;
}

export default function OptimizedImage({ 
    skeletonClassName = '', 
    onImageLoad, 
    containerClassName = '',
    className = '',
    ...imageProps 
}: OptimizedImageProps) {
    const [imageLoaded, setImageLoaded] = useState(false);

    const handleImageLoad = () => {
        setImageLoaded(true);
        if (onImageLoad) {
            onImageLoad();
        }
    };

    return (
        <div className={`relative ${containerClassName}`}>
            {!imageLoaded && (
                <Skeleton
                    className={`absolute inset-0 w-full h-full ${skeletonClassName} rounded-radius`}
                />
            )}
            <Image
                {...imageProps}
                className={`${className} ${imageLoaded ? 'relative z-10' : 'invisible'}`}
                fill={true}
                style={{
                    objectFit: 'cover',
                    width: '100%',
                    height: '100%'
                }}
                alt={imageProps.alt || ''}
                onLoad={(event) => {
                    handleImageLoad();
                    if (imageProps.onLoad) {
                        imageProps.onLoad(event);
                    }
                }}
            />
        </div>
    );
}