import type { ReactNode } from 'react'

export type ErrorBannerProps = {
	title?: string
	message: string
	hint?: ReactNode
	/** Shown via data-tip (hover/focus) */
	detail?: string
}

/**
 * Inline error alert for reserved content areas.
 * Prefer toasts for ephemeral failures (zero CLS); use this when replacing expected content.
 */
export function ErrorBanner({ title, message, hint, detail }: ErrorBannerProps) {
	return (
		<div className="pak-error" role="alert" tabIndex={0} data-tip={detail || undefined}>
			<strong className="pak-error-title">{title || 'Something went wrong'}</strong>
			<p className="pak-error-message">{message}</p>
			{hint ? <p className="pak-muted pak-error-hint">{hint}</p> : null}
		</div>
	)
}