<script lang="ts">
	import type { News } from '$lib/data/news';

	type Props = {
		items: News[];
		title?: string;
	};

	const { items, title = 'Destaques' }: Props = $props();

	let index = $state(0);

	function clamp(next: number) {
		const n = items.length;
		if (n === 0) return 0;
		return ((next % n) + n) % n;
	}

	function goTo(next: number) {
		index = clamp(next);
	}

	function next() {
		goTo(index + 1);
	}

	function prev() {
		goTo(index - 1);
	}

	function onKeydown(event: KeyboardEvent) {
		if (event.key === 'ArrowRight') {
			event.preventDefault();
			next();
		}

		if (event.key === 'ArrowLeft') {
			event.preventDefault();
			prev();
		}
	}
</script>

<section aria-label={title} class="overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
	<header class="flex items-center justify-between gap-3 px-6 py-5 sm:px-8">
		<h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">{title}</h2>
		<div class="flex items-center gap-2">
			<button
				type="button"
				class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
				onclick={prev}
				aria-label="Notícia anterior"
				disabled={items.length < 2}
			>
				<span aria-hidden="true">←</span>
			</button>
			<button
				type="button"
				class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
				onclick={next}
				aria-label="Próxima notícia"
				disabled={items.length < 2}
			>
				<span aria-hidden="true">→</span>
			</button>
		</div>
	</header>

	{#if items.length === 0}
		<div class="px-6 pb-7 sm:px-8">
			<p class="rounded-lg bg-white/80 p-6 text-sm text-(--text) ring-1 ring-black/5">
				Nenhuma notícia disponível.
			</p>
		</div>
	{:else}
		<div
			role="button"
			tabindex="0"
			aria-label="Carrossel de destaques. Use as setas esquerda e direita para navegar."
			class="px-6 pb-7 sm:px-8"
			onkeydown={onKeydown}
		>
			{#each items as item, i (item.slug)}
				<a
					href={`/noticias/${item.slug}`}
					class={`group block overflow-hidden rounded-lg ring-1 ring-black/10 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${i === index ? '' : 'hidden'}`}
					aria-label={`Ler notícia: ${item.title}`}
				>
					<div class="relative">
						{#if item.imageSrc}
							<img
								src={item.imageSrc}
								alt=""
								aria-hidden="true"
								class="h-72 w-full object-cover sm:h-80 lg:h-96"
								loading={i === index ? 'eager' : 'lazy'}
								decoding="async"
							/>
							<div
								aria-hidden="true"
								class="pointer-events-none absolute inset-0 bg-black/0 transition group-hover:bg-black/10"
							></div>
						{:else}
							<div
								aria-hidden="true"
								class="h-56 w-full bg-linear-to-br from-[color:var(--accent-blue)]/15 via-white/40 to-[color:var(--accent-yellow)]/20 sm:h-64"
							></div>
							<div class="absolute inset-0 bg-linear-to-t from-black/75 via-black/35 to-black/0"></div>
							<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-7">
								<div class="flex flex-wrap items-center gap-2">
									<span
										class="rounded-lg bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
									>
										{item.category}
									</span>
									<span
										class="rounded-lg bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10"
									>
										{new Date(item.date).toLocaleDateString('pt-BR')}
									</span>
								</div>
								<p class="mt-3 text-xl font-extrabold tracking-tight text-white drop-shadow-sm sm:text-2xl">
									{item.title}
								</p>
								<p class="mt-2 max-w-3xl text-sm leading-relaxed text-white/90 drop-shadow-sm">
									{item.dek}
								</p>
								<div
									class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-white drop-shadow-sm"
								>
									<span class="underline-offset-4 group-hover:underline">Ler notícia</span>
									<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
								</div>
							</div>
						{/if}
					</div>
				</a>
			{/each}

			<div class="mt-4 flex items-center justify-center gap-2">
				{#each items as item, i (item.slug)}
					<button
						type="button"
						onclick={() => goTo(i)}
						aria-label={`Ir para o destaque ${i + 1}: ${item.title}`}
						aria-current={i === index ? 'true' : undefined}
						class={`h-2.5 w-2.5 rounded-full ring-1 ring-black/10 transition ${i === index ? 'bg-(--link)' : 'bg-white/80 hover:bg-white'}`}
					></button>
				{/each}
			</div>
		</div>
	{/if}
</section>

