import { useEffect, useState } from 'react';

import { mediaPreviewClassName, qrPreviewShimmerClassName } from '@admin/components/ui/field-styles';
import { cn } from '@admin/lib/utils';

type QrPreviewImageProps = {
    src?: string;
    alt: string;
    size?: number;
    className?: string;
};

export function QrPreviewImage({ src, alt, size = 96, className }: QrPreviewImageProps) {
    const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading');

    useEffect(() => {
        setStatus('loading');
    }, [src]);

    const ready = status === 'ready';

    return (
        <div
            className={cn(
                'relative overflow-hidden',
                mediaPreviewClassName,
                ready ? 'bg-white p-1' : qrPreviewShimmerClassName,
                className,
            )}
            style={{ width: size, height: size }}
            aria-busy={!ready}
            aria-label={ready ? alt : 'QR code preview loading'}
        >
            {src ? (
                <img
                    key={src}
                    src={src}
                    alt={ready ? alt : ''}
                    width={size}
                    height={size}
                    className={cn('h-full w-full object-contain', !ready && 'opacity-0')}
                    onLoad={() => setStatus('ready')}
                    onError={() => setStatus('error')}
                />
            ) : null}
        </div>
    );
}