'use client';

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface PageContainerProps {
  children: ReactNode;
  className?: string;
  spacing?: 'default' | 'compact' | 'loose';
}

export function PageContainer({
  children,
  className,
  spacing = 'default',
}: PageContainerProps) {
  const spacingClasses = {
    compact: 'space-y-4',
    default: 'space-y-6',
    loose: 'space-y-8',
  };

  return (
    <div className={cn('container mx-auto p-6', spacingClasses[spacing], className)}>
      {children}
    </div>
  );
}

interface PageSectionProps {
  children: ReactNode;
  className?: string;
}

export function PageSection({ children, className }: PageSectionProps) {
  return (
    <section className={cn('space-y-4', className)}>
      {children}
    </section>
  );
}

export default PageContainer;
