Lazy Image

'use client';
import React from 'react';
import { LazyImage } from '@/components/ui/lazy-image';
import { Button } from '@/components/ui/button';

export default function Demo() {
	const [instance, setInstance] = React.useState(0);
	return (
		<LazyImageDemo
			key={instance}
			onReload={() => setInstance((prev) => prev + 1)}
		/>
	);
}

function LazyImageDemo({ onReload }: { onReload: () => void }) {
	const [seed] = React.useState(() => Math.floor(Math.random() * 1000));

	const imageUrl = `https://picsum.photos/seed/${seed}/1280/720`;

	return (
		<div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 p-4">
			<Button onClick={onReload}>Load Image</Button>
			<div className="mx-auto w-full max-w-4xl">
				<LazyImage
					alt="Random"
					src={imageUrl}
					ratio={16 / 9}
					fallback="https://placehold.co/1280x720?text=fallback-image"
				/>
			</div>
		</div>
	);
}