import type { ReactNode } from 'react';

export interface SurfaceProps {
  /** Warm paper, the base surface for the whole site, or the rare night surface. */
  tone?: 'paper' | 'night';
  children?: ReactNode;
}

/** The root of every screen: sets the paper or night ground and the base type. */
export function Surface({ tone = 'paper', children }: SurfaceProps) {
  return (
    <div
      className={tone === 'night' ? 'night' : undefined}
      style={{
        fontFamily: 'var(--font-sans)',
        fontSize: 'var(--step-body)',
        lineHeight: 'var(--leading-body)',
        fontWeight: 'var(--weight-regular)',
        background: tone === 'night' ? undefined : 'var(--paper)',
        color: tone === 'night' ? undefined : 'var(--ink)',
      }}
    >
      {children}
    </div>
  );
}