import type { HTMLAttributes, ReactNode } from 'react';
import { cx } from '../_internal/cx';

export interface PageProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
}

/**
 * Root wrapper of every Apple Clean surface: renders `<div class="kwac">`, which
 * carries the color tokens, the Helvetica stack, the 17px/1.6 body type and the
 * near-white background. Every other component must sit inside a `Page`;
 * without it the tokens and base styles do not apply.
 */
export function Page({ className, children, ...rest }: PageProps) {
  return (
    <div className={cx('kwac', className)} {...rest}>
      {children}
    </div>
  );
}