import type { ReactNode } from "react";

import styles from "./page-scaffold.module.css";

export interface PageScaffoldProps {
  children: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  className?: string;
  bodyClassName?: string;
  padded?: boolean;
  scrollable?: boolean;
  bodyScrollable?: boolean;
}

/**
 * Shared page layout primitive for mobile-first screens.
 *
 * Use it when migrating feature pages away from hand-written shell/padding
 * styles. It keeps safe-area padding and scroll ownership in one place.
 */
export function PageScaffold({
  children,
  header,
  footer,
  className,
  bodyClassName,
  padded = true,
  scrollable = false,
  bodyScrollable = false,
}: PageScaffoldProps) {
  return (
    <main
      className={[styles.root, padded ? styles.padded : "", className]
        .filter(Boolean)
        .join(" ")}
      data-scrollable={scrollable}
    >
      {header ? <div className={styles.header}>{header}</div> : null}
      <div
        className={[styles.body, bodyClassName].filter(Boolean).join(" ")}
        data-scrollable={bodyScrollable}
      >
        {children}
      </div>
      {footer ? <div className={styles.footer}>{footer}</div> : null}
    </main>
  );
}