import Link from "next/link";

/**
 * Abertura padrão das páginas internas: trilha, rótulo, título, frase de apoio
 * e ações. Mesma voz da /livro e da home, para que nenhuma página pareça
 * de outro produto.
 */
export default function PageHero({ trail = [], icon: Icon, label, title, lede, align = "left", children }) {
	const center = align === "center";
	return (
		<section className="shell pt-8 sm:pt-12">
			{trail.length > 0 && (
				<nav aria-label="Trilha de navegação" className="flex flex-wrap items-center gap-2 text-sm text-muted">
					<Link href="/" className="inline-flex min-h-11 min-w-11 items-center justify-center transition-colors hover:text-accent">
						Início
					</Link>
					{trail.map((item, i) => (
						<span key={item.label} className="flex min-h-11 items-center gap-2">
							<span aria-hidden="true" className="text-line-strong">/</span>
							{item.href && i < trail.length - 1 ? (
								<Link href={item.href} className="inline-flex min-h-11 min-w-11 items-center justify-center transition-colors hover:text-accent">
									{item.label}
								</Link>
							) : (
								<span aria-current="page" className="text-ink">
									{item.label}
								</span>
							)}
						</span>
					))}
				</nav>
			)}

			<div className={`${trail.length ? "mt-8 sm:mt-10" : ""} max-w-3xl ${center ? "mx-auto text-center" : ""}`}>
				{label && (
					<span className="chip chip-accent">
						{Icon && <Icon className="h-3.5 w-3.5" aria-hidden="true" />}
						{label}
					</span>
				)}
				<h1 className={`page-title ${label ? "mt-5" : ""}`}>{title}</h1>
				{lede && <p className={`lede mt-5 max-w-2xl ${center ? "mx-auto" : ""}`}>{lede}</p>}
				{children && <div className={`mt-7 flex flex-wrap gap-3 ${center ? "justify-center" : ""}`}>{children}</div>}
			</div>
		</section>
	);
}