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

	let { series, loggedIn }: { series: Series; loggedIn: boolean } = $props();
</script>

<a href="/series/{series.slug}" class="group block">
	<div
		class="relative aspect-[2/3] rounded-lg overflow-hidden bg-gray-800 shadow-md transition-transform duration-200 group-hover:-translate-y-1 group-hover:shadow-2xl"
	>
		{#if series.has_cover}
			<img
				src="/api/cover/series/{series.slug}"
				alt={series.title}
				class="w-full h-full object-cover"
				loading="lazy"
			/>
		{:else}
			<div class="w-full h-full flex items-end p-3 bg-gradient-to-br from-indigo-900 to-gray-900">
				<span class="text-sm font-medium text-gray-200 leading-tight line-clamp-3"
					>{series.title}</span
				>
			</div>
		{/if}

		<div
			class="absolute top-2 left-2 bg-indigo-600 text-white text-xs font-medium px-2 py-0.5 rounded-full"
		>
			Series
		</div>

		{#if series.library === 'private' && loggedIn}
			<div
				class="absolute top-2 right-2 bg-purple-600 text-white text-xs font-medium px-2 py-0.5 rounded-full"
			>
				Private
			</div>
		{/if}
	</div>
	<p class="mt-2 text-sm text-gray-300 truncate group-hover:text-white transition-colors">
		{series.title}
	</p>
</a>
