<script lang="ts">
	import { Play } from '@lucide/svelte';
	import { Button } from 'bits-ui';
	import type { Project } from './types/project';
	import { goto } from '$app/navigation';
	import Image from './Image.svelte';

	const mockProjects: Project[] = [
		{
			id: 1,
			name: 'Uno',
			description: 'Recreation of the classic card game',
			thumbnail: 'https://picsum.photos/seed/uno/400/225',
			url: '/game/index.html'
		},
		{
			id: 2,
			name: 'Space Invaders',
			description: 'Retro arcade shooter',
			thumbnail: 'https://picsum.photos/seed/space/400/225'
		},
		{
			id: 3,
			name: 'Tetris',
			description: 'Block stacking puzzle game',
			thumbnail: 'https://picsum.photos/seed/tetris/400/225'
		},
		{
			id: 4,
			name: 'Snake',
			description: 'Classic snake game with power-ups',
			thumbnail: 'https://picsum.photos/seed/snake/400/225'
		},
		{
			id: 5,
			name: 'Pong',
			description: 'Two-player paddle game',
			thumbnail: 'https://picsum.photos/seed/pong/400/225'
		},
		{
			id: 6,
			name: 'Breakout',
			description: 'Brick-breaking arcade game',
			thumbnail: 'https://picsum.photos/seed/breakout/400/225'
		}
	];
</script>

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
	{#each mockProjects as project (project.id)}
		<div
			class="group relative overflow-hidden rounded-lg bg-gray-900 shadow-xl ring-1 ring-gray-800 transition-transform hover:scale-[1.02]"
		>
			<div class="relative aspect-video overflow-hidden">
				<Image
					src={project.thumbnail}
					alt={project.name}
					class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
				/>

				<div
					class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
				>
					<Button.Root
						class="flex h-10 w-14 items-center justify-center rounded-md bg-white/90 text-gray-900 shadow-lg transition-transform hover:scale-110 hover:bg-white"
						onclick={() => {
							goto(`/p/${project.id}`).catch((e) => {
								console.warn(e);
							});
						}}
					>
						<Play />
					</Button.Root>
				</div>
			</div>

			<div class="p-4">
				<h3 class="text-lg font-semibold text-white">{project.name}</h3>
				<p class="mt-1 text-sm text-gray-400">{project.description}</p>
			</div>
		</div>
	{/each}
</div>
