import type { ReactNode } from 'react';
import Container from '@/components/site/container';
import { cn } from '@/lib/utils';

const tones = {
    base: 'bg-surface',
    muted: 'bg-surface-container-lowest',
    raised: 'bg-surface-container-high/50',
} as const;

type SectionProps = {
    id?: string;
    /** Alternate tones between consecutive sections to separate them. */
    tone?: keyof typeof tones;
    size?: 'default' | 'narrow';
    /** Decorative layers (e.g. <Glow />) rendered behind the content. */
    background?: ReactNode;
    className?: string;
    containerClassName?: string;
    children: ReactNode;
};

export default function Section({
    id,
    tone = 'base',
    size,
    background,
    className,
    containerClassName,
    children,
}: SectionProps) {
    return (
        <section
            id={id}
            className={cn(
                'border-outline-variant/30 relative w-full overflow-hidden border-b py-16 lg:py-24',
                tones[tone],
                className,
            )}
        >
            {background}
            <Container size={size} className={containerClassName}>
                {children}
            </Container>
        </section>
    );
}