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

	import ChevronRight from './Icons/ChevronRight.svelte';

	export let chapter: Chapter;
</script>

<li
	class={cn(
		'font-code group relative flex h-full w-full 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 gap-4 p-4"
			href={chapter.show ? `/dashboard/chapters/${chapter.id}` : '#'}
		>
			<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 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>
