<script lang="ts">
	import type { IRoom } from "$types/rooms";

	export let room: IRoom;
</script>

<div
	class="relative flex h-full w-full overflow-hidden rounded-[2.25rem] border-2 border-solid border-[#ffffff34] bg-[#110d10] p-6 shadow-lg shadow-[#00000028]"
>
	<div
		class="absolute left-0 top-0 z-20 h-full w-full opacity-25 blur-sm"
		style="background-image: url({room.game
			?.bannerUrl}); background-size: cover; background-position: center center;
			--mask-image: linear-gradient(
				to right,
				rgba(0, 0, 0, 0.1) 50%,
				rgba(0, 0, 0, 1) 100%
			); mask-image: var(--mask-image); -webkit-mask-image: var(--mask-image);
			"
	/>
	<div class="relative z-30 flex items-stretch gap-6">
		{#if room.game?.iconUrl}
			<img
				src={room.game.iconUrl}
				alt="Icon for '{room.preferredGameName}'"
				class="w-[100px] rounded-2xl object-cover"
			/>
		{/if}
		<div class="flex flex-col">
			<h2 class="mb-2 text-[20px] leading-[1.41] md:text-[28px] md:leading-[1.1]">
				{room.name}
				<span class="ml-1 text-base font-normal text-gray-300"
					>({room.game?.name || "No preferred game"})</span
				>
			</h2>
			<p class="flex-grow">{room.description}</p>
			<div class="mt-2 text-sm text-gray-300">
				{room.players.length} / {room.maxPlayers} | {#if room.players.length > 4}
					{#each room.players.slice(0, 4) as player}
						{player.nickname}{#if player !== room.players[3]},{" "}
						{/if}
					{/each}
					and {room.players.length - 4}
					{room.players.length - 4 === 1 ? "other" : "others"}
				{:else}
					{#each room.players as player}
						{player.nickname}{#if player !== room.players[room.players.length - 1]},{" "}
						{/if}
					{/each}
				{/if} | {room.hasPassword ? "Private" : "Public"} | {room.address}:{room.port}
			</div>
		</div>
	</div>
</div>
