<script lang="ts">
	import Swords from 'lucide-svelte/icons/swords';
	import ChevronRight from 'lucide-svelte/icons/chevron-right';

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

	export let chapter: Chapter;
</script>

<li
	class={cn(
		'group relative flex h-full w-full flex-col rounded border border-border bg-card transition-colors duration-150',
		{
			'hover:bg-card/80': 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 ? `/chapters/${chapter.id}` : '#'}
		>
			<div class="flex items-center gap-2">
				<span class="font-semibold">
					{chapter.name}
				</span>
				{#if chapter.id === 1}
					<Swords class="stroke-muted-foreground" />
				{/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="font-semibold">
					{chapter.name}
				</h2>
			</div>
		</span>
	{/if}
</li>
