@kentcdodds/package-app-kit

/** @jsxRuntime automatic */
/** @jsxImportSource remix/ui */
import type { BuildAction } from 'remix/router'
import { listNotes } from '../data/notes.ts'
import { render } from '../ui/render.tsx'
import { AppShell } from '../ui/layout.tsx'
import { Counter } from '../ui/counter.tsx'
import { routes } from '../routes.ts'

export default {
	async handler(context) {
		const notes = await listNotes(context)
		const noteCount = notes.length
		return render(
			context,
			<AppShell page="home" heading="__APP_TITLE__">
				<section class="pak-card pak-stack" aria-label="Design tokens">
					<p class="pak-eyebrow">Colors</p>
					<div class="pak-swatches">
						<span class="pak-swatch-label">
							<span class="pak-swatch" style="background:var(--accent)" aria-hidden="true" />
							Accent
						</span>
						<span class="pak-swatch-label">
							<span class="pak-swatch" style="background:var(--ink)" aria-hidden="true" />
							Ink
						</span>
						<span class="pak-swatch-label">
							<span class="pak-swatch" style="background:var(--surface)" aria-hidden="true" />
							Surface
						</span>
						<span class="pak-swatch-label">
							<span class="pak-swatch" style="background:var(--good)" aria-hidden="true" />
							Good
						</span>
					</div>
				</section>

				<section class="pak-card pak-stack" aria-label="Notes">
					<p class="pak-eyebrow">Notes</p>
					<a
						class="pak-btn pak-btn-accent"
						href={routes.notes.index.href()}
						aria-label={`Notes (${noteCount})`}
					>
						Notes
						<span class="pak-pill" aria-hidden="true">
							{noteCount}
						</span>
					</a>
				</section>

				<section class="pak-card pak-stack" aria-label="Remix island pattern">
					<p class="pak-eyebrow">Pattern example</p>
					<p class="pak-muted">
						Hydrated <code>clientEntry</code> island — copy this shape for interactive bits.
					</p>
					<div class="pak-cluster">
						<Counter initialCount={0} label="Taps" />
					</div>
				</section>
			</AppShell>,
			{ page: 'home', title: '__APP_TITLE__' },
		)
	},
} satisfies BuildAction<'ANY', typeof routes.home>