---
let app = Astro.props.item;

let itemName = app.name.replace(" ", "");
const actionLabel = app.redirectUrl ? `Open ${app.name} link` : `Open ${app.name} window`;
---

<a
	id={itemName}
	data-id={app.name}
	data-window-id={app.windowId}
	data-redirect-url={app.redirectUrl}
	href={app.redirectUrl ?? "#"}
	role="button"
	aria-label={actionLabel}
>
	<div class="h-100 m-4">
		<img src={app.logo} alt="" aria-hidden="true" class="w-auto h-16 mx-auto my-2" />
		<h3 class="font-sans text-white text-center">{app.name}</h3>
	</div>
</a>

<style>

	h3 {
		font-weight: 300;
		/* font-family: Arial, sans-serif; */
	}

	a {
		cursor: pointer;
		user-select: none;
		display: block;
	}

	a:focus-visible {
		outline: 1px dotted #fff;
		outline-offset: -2px;
	}

	.link {
		width: 100%;
		height: 100%;

		z-index: 1;
	}
</style>