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

export interface SectionProps {
  /** Paper is the default. Night is a dramatic device: the hero and at most one more. */
  tone?: 'paper' | 'night';
  /** `tight` for a subordinate band, `intro` for a page head. */
  spacing?: 'default' | 'tight' | 'intro';
  id?: string;
  children?: ReactNode;
}

/** One horizontal band of the page, carrying the vertical air around its content. */
export function Section({ tone = 'paper', spacing = 'default', id, children }: SectionProps) {
  return (
    <section
      id={id}
      className={cx(
        'section',
        spacing === 'tight' && 'section--tight',
        spacing === 'intro' && 'section--intro',
        tone === 'night' && 'night',
      )}
    >
      {children}
    </section>
  );
}