<script lang="ts">
	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
	import Button from '$lib/components/ui/form-elements/Button.svelte';

	import { fade } from 'svelte/transition';
	import { flip } from 'svelte/animate';

	import { quickLinks } from '$lib/quick-links.svelte';

	const flipDuration = 300;
</script>

<BaseCard header={'Quick Links'}>
	<div class="card-content">
		{#if quickLinks.list.length === 0}
			<p class="msg">Your most viewed stations will appear here</p>
		{:else}
			<div class="stations-flex">
				{#each quickLinks.list as station (station.id)}
					<div
						class="btn-container"
						animate:flip={{ duration: flipDuration }}
						in:fade|global={{ duration: 200 }}
					>
						<Button href={`/board?loc=${station.id}`}
							><span class="stn-name">{station.id}</span></Button
						>
					</div>
				{/each}
			</div>
		{/if}
	</div>
</BaseCard>

<style>
	.card-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 90%;
		min-height: 98px;
		margin: auto;
		padding: 10px 0 10px 0;
	}

	.stations-flex {
		display: flex;
		flex-wrap: wrap;
		gap: 0.1rem 0.5rem;
		justify-content: center;
		align-items: flex-start;
	}

	.btn-container {
		display: block;
		width: fit-content;
		will-change: transform;
	}

	.msg {
		font-size: 1.1rem;
		font-weight: 600;
		color: var(--color-title);
	}

	.stn-name {
		text-transform: capitalize;
	}
</style>
