---
interface Props {
    as?: keyof HTMLElementTagNameMap;
    class?: string;
    density?: 'base' | 'compact' | 'spacious';
    id?: string;
    layer?: '1' | '2' | '3';
    tone?: 'default' | 'emphasis' | 'muted';
    [key: string]: unknown;
}

const {
    as = 'section',
    class: className = '',
    density = 'base',
    id,
    layer = '2',
    tone = 'default',
    ...rest
} = Astro.props;
const Tag = as;
const densityClasses = {
    compact: 'section-density-compact',
    base: 'section-density-base',
    spacious: 'section-density-spacious',
};
const toneClasses = {
    default: '',
    muted: 'section-shell-muted px-3 sm:px-4',
    emphasis: 'section-shell-emphasis px-3 sm:px-4',
};
---

<Tag
    id={id}
    data-disclosure-layer={layer}
    class:list={[
        densityClasses[density],
        toneClasses[tone],
        className,
    ]}
    {...rest}
>
    <slot />
</Tag>