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

	let { publications }: { publications: Publication[] } = $props();

	const INITIAL_COUNT = 4;
	const LOAD_STEP = 2;
	let visibleCount = $state(INITIAL_COUNT);
	const visiblePublications = $derived(publications.slice(0, visibleCount));
	const hasMore = $derived(visibleCount < publications.length);
</script>

{#if publications.length > 0}
	<div id="writings" class="mt-10 flex flex-col items-center justify-center md:mt-20" use:reveal>
		<div class="flex flex-col items-center justify-center">
			<h1 class="text-center font-urbanist text-2xl font-semibold md:text-5xl">Writings</h1>
			<span class="text-md mt-2 px-2 text-center font-urbanist md:mt-4 md:px-5 md:text-xl">
				My long form writings found across the atmosphere
			</span>
		</div>
		<div class="container mt-10 grid gap-10 p-4 md:grid-cols-2 xl:grid-cols-3">
			{#each visiblePublications as item (item.href)}
				<div class="card bg-base-100 shadow-sm transition duration-300 hover:-translate-y-1">
					{#if item.image}
						<figure>
							<img class="h-48 w-full object-cover" src={item.image} alt={item.name} />
						</figure>
					{/if}
					<div class="card-body">
						<h2 class="card-title font-urbanist text-2xl font-black">{item.name}</h2>
						<p class="text-md font-urbanist font-medium opacity-60">{item.description}</p>
						<div class="mt-2 card-actions justify-end">
							<a
								class="btn font-urbanist btn-primary"
								href={item.href}
								target="_blank"
								rel="noopener noreferrer"
							>
								Read
							</a>
						</div>
					</div>
				</div>
			{/each}
		</div>
		{#if hasMore}
			<button
				class="btn mt-10 font-urbanist btn-primary"
				onclick={() => (visibleCount = Math.min(visibleCount + LOAD_STEP, publications.length))}
			>
				Load More
			</button>
		{/if}
	</div>
{/if}
