import * as React from 'react';
import { cn } from '@/lib/utils';

/**
 * Container — max-width wrapper matching the 7xl grid used throughout the app.
 */
export function Container({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn('mx-auto max-w-7xl px-4', className)} {...props}>
      {children}
    </div>
  );
}

/**
 * NarrowContainer — used for single-column pages (auth, wizard, profile, CMS).
 */
export function NarrowContainer({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn('mx-auto max-w-xl px-4', className)} {...props}>
      {children}
    </div>
  );
}

/**
 * Section — wraps a page section with standard vertical rhythm.
 * Optionally renders a semantic <section> with an accessible heading.
 */
export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
  heading?: string;
  headingClassName?: string;
  as?: 'section' | 'div';
  contained?: boolean;
  spacing?: 'sm' | 'md' | 'lg';
}

const SPACING = {
  sm: 'py-6 md:py-8',
  md: 'py-8 md:py-12',
  lg: 'py-12 md:py-16',
} as const;

export function Section({
  heading,
  headingClassName,
  as: Tag = 'section',
  contained = true,
  spacing = 'md',
  className,
  children,
  ...props
}: SectionProps) {
  const content = (
    <>
      {heading ? (
        <h2 className={cn('font-heading text-2xl md:text-3xl font-bold text-neutral-900 text-start mb-6', headingClassName)}>
          {heading}
        </h2>
      ) : null}
      {children}
    </>
  );

  return (
    <Tag className={cn(SPACING[spacing], className)} {...props}>
      {contained ? <Container>{content}</Container> : content}
    </Tag>
  );
}