import { Link, getRouteApi } from '@tanstack/react-router'
import { AppShell } from '../ui/layout.tsx'
import { Counter } from '../ui/counter.tsx'

const routeApi = getRouteApi('/')

export function HomePage() {
	const { noteCount } = routeApi.useLoaderData()
	return (
		<AppShell page="home" heading="__APP_TITLE__">
			<section className="pak-card pak-stack" aria-label="Design tokens">
				<p className="pak-eyebrow">Colors</p>
				<div className="pak-swatches">
					<span className="pak-swatch-label">
						<span className="pak-swatch" style={{ background: 'var(--accent)' }} aria-hidden="true" />
						Accent
					</span>
					<span className="pak-swatch-label">
						<span className="pak-swatch" style={{ background: 'var(--ink)' }} aria-hidden="true" />
						Ink
					</span>
					<span className="pak-swatch-label">
						<span className="pak-swatch" style={{ background: 'var(--surface)' }} aria-hidden="true" />
						Surface
					</span>
					<span className="pak-swatch-label">
						<span className="pak-swatch" style={{ background: 'var(--good)' }} aria-hidden="true" />
						Good
					</span>
				</div>
			</section>

			<section className="pak-card pak-stack" aria-label="Notes">
				<p className="pak-eyebrow">Notes</p>
				<Link
					to="/notes"
					className="pak-btn pak-btn-accent"
					aria-label={`Notes (${noteCount})`}
				>
					Notes
					<span className="pak-pill" aria-hidden="true">
						{noteCount}
					</span>
				</Link>
			</section>

			<section className="pak-card pak-stack" aria-label="TanStack React pattern">
				<p className="pak-eyebrow">Pattern example</p>
				<p className="pak-muted">
					Hydrated React state — copy this shape for interactive bits.
				</p>
				<div className="pak-cluster">
					<Counter initialCount={0} label="Taps" />
				</div>
			</section>
		</AppShell>
	)
}