<script lang="ts">
	let {
		name,
		link,
		img,
		redirect = true,
		children
	}: { name?: string; link: string; img: string; redirect?: boolean; children?: any } = $props();
</script>

<div class="link grow">
	{#if redirect}
		<a href={link} target="_blank">
			<h2 class="noselect">
				{#if name}
					{name}
				{:else}
					{link}
				{/if}
			</h2>
			<div class="desc">
				<img class="noselect" src={img} alt="" />
				<p>{@render children?.()}</p>
			</div>
		</a>
	{:else}
		<h2 class="noselect">
			{#if name}
				{name}
			{:else}
				{link}
			{/if}
		</h2>
		<div class="desc">
			<img class="noselect" src={img} alt="" />
			<p>{@render children?.()}</p>
		</div>
	{/if}
</div>

<style lang="scss">
	@use '$lib/styles/variables' as vars;

	a {
		text-decoration: none;
        color: white;
	}

    img {
        padding: 1em;
    }

	h2 {
		background: linear-gradient(-90deg, #dede6c, #dede6c 25%, #00d4ff00);
		color: black;
		line-height: 28px;
		padding: 0.3em 0 0 0.3em;
		text-align: right;
	}

	.link {
		border: 1px solid vars.$base-colour;
	}

	.desc {
		img {
			width: 100px;
			height: 100px;
		}
		p {
			text-align: center;
			flex-grow: 1;
			font-size: 1.5em;
		}
		display: flex;
		align-items: center;
	}

    .grow {
    transition: all 0.2s ease-in-out;
}

.grow:hover {
    transform: scale(1.03);
    border: 1px solid vars.$highlight;
}
</style>
