<script lang="ts" module>
	import { type StoreEntity } from "./+page.server.ts";
	import { snackImage } from "./func.svelte";
	import { storeButton } from "$lib/StoreButtons.svelte";
	import { ExternalLink } from "@lucide/svelte";
	import "./snacks.scss";
	import "$lib/storeButtons.scss";
	export { snackProduct };
</script>

{#snippet snackProduct(product: StoreEntity, slug: string)}
	<div class="SnackProductContainer">
		<a href="/store/{slug}" class="SnackProductLink">
			<enhanced:img src={snackImage(product.images[0])} alt={product.name} />
		</a>
		<div class="SnackProductDetails">
			<div>
				<h1 class="SnackProductName">
					{product.name}
					<a href="/store/{slug}" class="SnackProductPopOut">
						<ExternalLink size={16} />
					</a>
				</h1>
				<p>{product.description}</p>
			</div>
			<div class="SnackProductButtons">
				{#if product.gumroad != undefined}
					{@render storeButton("gumroad", product.gumroad!)}
				{/if}
				{#if product.jinxxy != undefined}
					{@render storeButton("jinxxy", product.jinxxy!)}
				{/if}
			</div>
		</div>
	</div>
{/snippet}
