<script lang="ts">
	import { Trophy } from 'lucide-svelte';

	import type { Chapter } from '$lib/types';
	import { cn } from '$lib/utils';

	import ChevronRight from './Icons/ChevronRight.svelte';
	
	export let chapter: Chapter;
</script>

<li
	class={cn(
		'group relative flex h-full w-full flex-col rounded-md bg-primary-700 transition-colors duration-150',
		{
			'hover:bg-primary-600': chapter.show,
			'opacity-50': !chapter.show
		}
	)}
>
	{#if chapter.show}
		<a
			class="flex h-full w-full items-center justify-between gap-4 p-4"
			href={chapter.show ? `/dashboard/chapters/${chapter.id}` : '#'}
		>
			<div class="flex items-center gap-2">
				<span class="text-base font-semibold">
					{chapter.name}
				</span>
				{#if chapter.id === 1}
					<Trophy class="stroke-highlight-secondary" />
				{/if}
			</div>
			<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
				<ChevronRight />
			</span>
		</a>
	{:else}
		<span class="flex h-full w-full items-center gap-4 p-4">
			<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
				<h2 class="text-base font-semibold">
					{chapter.name}
				</h2>
			</div>
		</span>
	{/if}
</li>
