import { cn } from '#/lib/utils.js';

const TONES = {
  muted: 'text-faint',
  error: 'text-destructive',
};

/**
 * One sentence standing in for a screen: the thing is missing, or the read
 * failed. It takes the room the screen would have and scrolls inside it, so
 * a long error message reads in full on a short window.
 * @param {{tone?: 'muted'|'error', className?: string, children: import('react').ReactNode}} props
 */
export function PageNotice({ tone = 'muted', className, children }) {
  return (
    <div className="min-h-0 flex-1 overflow-y-auto">
      <p
        className={cn(
          'mx-auto max-w-md px-(--gutter) py-16 text-center text-[13.5px]',
          TONES[tone],
          className,
        )}
      >
        {children}
      </p>
    </div>
  );
}