import type { HTMLAttributes, ReactNode } from 'react';
import { cn } from '@/lib/cn';

export function Container({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn('container-page', className)} {...rest} />;
}

export type SectionTone = 'default' | 'band' | 'glow';

const tones: Record<SectionTone, string> = {
  default: '',
  // Slightly lifted band with hairlines, used to alternate rhythm down long pages.
  band: 'border-y border-line/70 bg-surface/60',
  glow: 'bg-[radial-gradient(60%_80%_at_50%_0%,rgb(124_92_255/0.18),transparent_70%)]',
};

export interface SectionProps extends HTMLAttributes<HTMLElement> {
  tone?: SectionTone;
  /** Vertical rhythm preset. */
  spacing?: 'sm' | 'md' | 'lg';
  /** Wrap children in a <Container>. Default true. */
  contained?: boolean;
  children: ReactNode;
}

const spacings = { sm: 'py-12 sm:py-16', md: 'py-16 sm:py-24', lg: 'py-20 sm:py-32' } as const;

export function Section({ tone = 'default', spacing = 'md', contained = true, className, children, ...rest }: SectionProps) {
  return (
    <section className={cn('relative', tones[tone], spacings[spacing], className)} {...rest}>
      {contained ? <Container>{children}</Container> : children}
    </section>
  );
}