import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import DocumentThumbnail from './DocumentThumbnail.svelte';

afterEach(cleanup);

describe('DocumentThumbnail', () => {
	it('renders the supplied thumbnail image when thumbnailUrl is set', async () => {
		render(DocumentThumbnail, {
			props: {
				doc: { id: 'd1', thumbnailUrl: '/api/d1/thumb', contentType: 'application/pdf' }
			}
		});

		const img = document.querySelector('img') as HTMLImageElement;
		expect(img).not.toBeNull();
		expect(img.src).toContain('/api/d1/thumb');
	});

	it('renders the placeholder icon when thumbnailUrl is missing', async () => {
		render(DocumentThumbnail, {
			props: { doc: { id: 'd1', thumbnailUrl: null, contentType: 'application/pdf' } }
		});

		const svg = document.querySelector('svg');
		expect(svg).not.toBeNull();
	});

	it('uses the small container size by default', async () => {
		render(DocumentThumbnail, {
			props: { doc: { id: 'd1', thumbnailUrl: null, contentType: 'application/pdf' } }
		});

		const container = document.querySelector('.h-\\[84px\\]');
		expect(container).not.toBeNull();
	});

	it('uses the large container size when size="lg"', async () => {
		render(DocumentThumbnail, {
			props: {
				doc: { id: 'd1', thumbnailUrl: null, contentType: 'application/pdf' },
				size: 'lg'
			}
		});

		const container = document.querySelector('.h-\\[168px\\]');
		expect(container).not.toBeNull();
	});

	it('uses lazy loading attributes on the thumbnail image', async () => {
		render(DocumentThumbnail, {
			props: {
				doc: { id: 'd1', thumbnailUrl: '/api/d1/thumb', contentType: 'application/pdf' }
			}
		});

		const img = document.querySelector('img') as HTMLImageElement;
		expect(img.loading).toBe('lazy');
		expect(img.decoding).toBe('async');
	});
});