<script>
	import {
		deleteVersion,
		launchBlenderVersion,
		toggleFavourite,
		registerVersion
	} from '$lib/library';
	import Button from '$lib/components/Button.svelte';
	import Menu from '$lib/components/Menu.svelte';
	let { version } = $props();
</script>

<div id="card">
	<div class="row">
		{version.version}
		<Button style="iconbutton" onclick={() => toggleFavourite(version)}
			><svg
				xmlns="http://www.w3.org/2000/svg"
				width="16"
				height="16"
				class="fav-btn {version.favourite ? 'fav' : ''}"
				viewBox="0 0 16 16"
			>
				<path
					d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"
				/>
			</svg>
		</Button>
	</div>
	<div class="row">
		<Button onclick={() => launchBlenderVersion(version)}>Launch</Button>
		<Menu>
			{#snippet children({ close })}
				<button
					type="button"
					class="menu-item"
					onclick={() => deleteVersion(version) && close()}
					onkeydown={(e) =>
						(e.key === 'Enter' || e.key === ' ') && deleteVersion(version) && close()}
					>Delete</button
				>
				<button
					type="button"
					class="menu-item"
					onclick={close}
					onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && close()}>Option 2</button
				>
				<button
					type="button"
					class="menu-item"
					onclick={() => registerVersion(version) && close()}
					onkeydown={(e) =>
						(e.key === 'Enter' || e.key === ' ') && registerVersion(version) && close()}
					>Default</button
				>
			{/snippet}
		</Menu>
	</div>
</div>

<style>
	#card {
		display: flex;
		flex-direction: column;
		position: relative;
		justify-content: space-between;
		aspect-ratio: 1 / 0.7;
		width: 100%;
		min-width: 170px;
		max-width: 200px;
		background-color: var(--white);
		border-radius: 5px;
		background-color: var(--light);
		padding: 1rem;
	}
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#card:hover {
		outline: 2px solid var(--accent);
		outline-offset: -2px;
	}
	.fav-btn:hover {
		fill: var(--accent);
	}
	.fav-btn.fav {
		fill: var(--accent);
	}
	.menu-item {
		padding: 0.5rem 1rem;
		cursor: pointer;
		background: none;
		border: none;
		font-family: var(--font);
		font-size: 1rem;
		color: var(--black);
		text-align: left;
		width: 100%;
	}
	.menu-item:hover {
		background-color: var(--light-accent);
	}
</style>
