<script lang="ts">
	import { cn } from '$lib/Utils';
	import type { Puzzle } from '$lib/types';

	export let puzzle: Puzzle;

	$: tags = puzzle.tags?.filter((tag) => !['easy', 'medium', 'hard'].includes(tag.name));
</script>

<li
	class={cn(
		'group relative flex h-full w-full rounded-md border-2 bg-primary-700 font-code transition-colors duration-150 hover:bg-primary-600',
		{
			'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'),
			'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
			'border-red-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'hard'),
			'border-highlight-primary': !puzzle.tags?.length
			// 'cursor-not-allowed': !isStarted(chapter)
		}
	)}
>
	<a
		class="flex h-full w-full items-center justify-between p-4"
		href={`/dashboard/puzzles/${puzzle.id}`}
	>
		<div class="flex w-10/12 flex-col gap-2 lg:w-full lg:flex-row">
			<span class="text-base font-semibold">
				{puzzle.name}{' '}
				<span class="text-sm text-highlight-secondary">
					({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
				</span>
			</span>
		</div>
		<div class="flex items-center gap-x-6">
			{#if puzzle.tags?.length}
				<div class="flex gap-x-2 text-sm text-muted">
					{#each puzzle.tags as tag}
						<span class="inline-block rounded-md bg-primary-800 px-2 py-1">
							{tag.name}
						</span>
					{/each}
				</div>
			{/if}
			<!-- <ChevronRightIcon class="-translate-x-2 transform-gpu text-highlight-secondary duration-300 group-hover:translate-x-0 group-hover:text-brand" /> -->
		</div>
	</a>
</li>
