<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements';
	import { startStream } from './connect';
	import { type App } from './apps';

	interface Props {
		app: App;
		server_name: string;
	}

	let { app, server_name }: Props = $props();

	async function streamApp() {
		await startStream(app, server_name);
	}
</script>

<div class="app-box" on:click={streamApp}>
	<div class="app-artwork">
		<div class="play-button"></div>
	</div>
	<div class="app-title">{app.title}</div>
	<div class="app-server">{server_name}</div>
</div>

<style>
	body {
		font-family: Arial, sans-serif;
		margin: 20px;
		background-color: #1a1a1a;
		color: white;
	}

	.apps-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		padding: 20px 0;
	}

	.app-box {
		position: relative;
		width: 200px;
		height: 280px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.app-box:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
	}

	.app-artwork {
		width: 200px;
		height: 200px;
		background-color: #333;
		border: 2px solid #555;
		border-radius: 8px;
		position: relative;
		overflow: hidden;
		transition: border-color 0.3s ease;
	}

	.app-box:hover .app-artwork {
		border-color: #00aaff;
	}

	.app-title {
		text-align: center;
		margin: 10px 0 5px 0;
		font-size: 16px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.app-server {
		text-align: center;
		font-size: 12px;
		color: #aaa;
		margin: 0;
	}

	.play-button {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 60px;
		height: 60px;
		background-color: rgba(0, 170, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}

	.play-button::after {
		content: '';
		width: 0;
		height: 0;
		border-left: 20px solid white;
		border-top: 12px solid transparent;
		border-bottom: 12px solid transparent;
		margin-left: 4px;
	}

	.app-box:hover .play-button {
		opacity: 1;
	}

	.app-box.clicked {
		transform: scale(0.95);
	}

	.loading {
		text-align: center;
		font-size: 18px;
		margin-top: 50px;
	}

	.error {
		color: #ff4444;
		text-align: center;
		font-size: 18px;
		margin-top: 50px;
	}
</style>
