---
import Base from '@eratic/core/layouts/Base.astro';
import EntryList from '@eratic/core/components/EntryList.astro';
import { allFavs, favPath, favKicker, kindPath } from '../lib/entries';
import { KINDS, KIND_PLURAL } from '../content.config';

const favs = await allFavs();

// Only offer a filter for a kind that actually has something in it — an empty
// category link is a small broken promise.
const present = KINDS.filter((kind) => favs.some((fav) => fav.data.kind === kind));

const listed = favs.map((fav) => ({
	path: favPath(fav),
	title: fav.data.title,
	summary: fav.data.summary,
	pubDate: fav.data.pubDate,
	kicker: favKicker(fav),
}));
---

<Base site="fav" path="/">
	<header class="intro">
		<h1>fav</h1>
		<p class="intro__text">
			Objects, books, films and music worth keeping, with notes on why.
		</p>

		{
			present.length > 1 && (
				<nav class="kinds" aria-label="Filter by kind">
					<ul>
						{present.map((kind) => (
							<li>
								<a href={kindPath(kind)}>{KIND_PLURAL[kind]}</a>
							</li>
						))}
					</ul>
				</nav>
			)
		}
	</header>

	<EntryList entries={listed} empty="Nothing collected yet." />
</Base>

<style>
	.intro {
		margin-block: var(--space-xl) var(--space-2xl);
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
	}

	.intro h1 {
		font-family: var(--font-prose);
		font-size: var(--step-4);
		font-weight: 600;
		line-height: 1.05;
		letter-spacing: -0.022em;
		font-optical-sizing: auto;
	}

	.intro__text {
		font-family: var(--font-prose);
		font-size: var(--step-1);
		color: var(--ink-muted);
		text-wrap: pretty;
	}

	.kinds {
		margin-block-start: var(--space-s);
	}

	.kinds ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-s);
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.kinds a {
		font-family: var(--font-ui);
		font-size: var(--step--1);
		color: var(--ink-muted);
		text-decoration: none;
		border-block-end: 1px solid var(--rule-strong);
		padding-block-end: 1px;
	}

	.kinds a:hover {
		color: var(--ink);
		border-color: var(--ink);
	}
</style>