<script lang="ts">
	export let data: {
		title: string;
		description?: string;
		path: string;
		date?: string;
		tags?: string[];
		image?: string;
	};
</script>

<a href={data.path}>
	<div class="card">
		{#if data.image }
			<img src="{data.image}" class="image" alt='' />
		{/if}
		<h2>{data.title}</h2>
		{#if data.description}
			<p>{data.description}</p>
		{/if}
		{#if data.tags}
			<div class="tags">
				{#each data.tags as tag}
					<span class="tag">{tag}</span>
				{/each}
			</div>
		{/if}
	</div>
</a>

<style>
	a {
		text-decoration: none;
		color: inherit;
		margin: 0;
		padding: 0;
	}

	a:hover {
		color: var(--color-nav);
	}

	.card {
		overflow: hidden;
		border-radius: 0.25rem;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 1rem;
		height: 100%;
	}

	.tags {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}

	.tag {
		background-color: var(--color-bg-tag);
		color: var(--color-tag);
		padding: 0.25rem 0.5rem;
		border-radius: 0.25rem;
	}

	.image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
