import React from 'react';
import { motion } from 'framer-motion';
import { FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';

export function Page({ title, children }: { title: string; children?: React.ReactNode }) {
  const motionEnabled = !prefersReducedMotion();
  const containerProps = getMotionContainerProps(motionEnabled, STAGGER_FAST);
  const itemProps = getMotionItemProps(motionEnabled, FADE_UP);

  return (
    <motion.div {...containerProps} style={{ maxWidth: 720, margin: '0 auto', padding: 16 }}>
      <motion.h1 {...itemProps} style={{ fontSize: 20, fontWeight: 600, marginBottom: 12 }}>
        {title}
      </motion.h1>
      <motion.div {...itemProps}>{children}</motion.div>
    </motion.div>
  );
}