'use client';

import { colors, typography } from '@/styles/theme';

export interface HelpPageProps {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}

export function HelpPage({ title, subtitle, children }: HelpPageProps) {
  return (
    <div
      className="h-full flex flex-col"
      style={{ backgroundColor: colors.bgSecondary }}
    >
      <div className="bg-white border-b" style={{ borderColor: colors.border }}>
        <div className="px-6 h-12 flex items-center">
          <h1 className={typography.h4}>{title}</h1>
          {subtitle && (
            <span className={`${typography.caption} ml-3`}>{subtitle}</span>
          )}
        </div>
      </div>

      <div className="flex-1 overflow-auto">
        <div className="max-w-4xl mx-auto px-6 py-8 space-y-6">{children}</div>
      </div>
    </div>
  );
}