---
const { data, index } = Astro.props;
const hasScreenshot = !!data.demo;
const backgroundStyle = hasScreenshot
	? `url('https://v1.screenshot.11ty.dev/${encodeURIComponent(
			data.demo
	  )}/medium/9:16/')`
	: `linear-gradient(60deg, var(--theme-bg-accent), var(--theme-accent))`;
---

<article
	class={`card ${hasScreenshot ? 'has-screenshot' : ''}`}
	style={`background: ${backgroundStyle}; background-size: cover;`}
>
	{hasScreenshot && <div class="background-dimmer"></div>}
	<div class="card-body">
		<a href={data.github} class="card-header" target="_blank">
			{data.name}
			<span>{` →`}</span>
		</a>
	</div>
</article>

<style>
	.card {
		position: relative;
		display: flex;
		flex-direction: column;
		grid-column: span 1;
		flex-grow: 1;
		height: 200px;
		justify-content: center;
		align-items: center;
		padding: 1rem;
		text-align: center;
	}
	.card-header {
		flex-grow: 1;
		font-weight: bold;
		font-size: 1.8rem;
	}
	.background-dimmer {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: linear-gradient(45deg, #0004, #000b);
		z-index: 2;
	}
	.card-body,
	.card-header {
		color: var(--text-color);
	}
	.card-body {
		z-index: 3;
	}
	.card.has-screenshot .card-header,
	.card.has-screenshot .card-body {
		color: white;
	}
</style>