---
/**
 * Container Layout Primitive
 *
 * Centers content with a max-width constraint.
 * Use for page-level content wrapping.
 *
 * @example
 * <Container>
 *   <H1>Page Title</H1>
 *   <Body>Content goes here</Body>
 * </Container>
 */

import './Container.css';
import type { HTMLAttributes } from 'astro/types';
import type { ContainerProps } from './types';

interface Props extends HTMLAttributes<'div'>, ContainerProps {}

const { as: Tag = 'div', class: className, ...rest } = Astro.props;
---

<Tag class:list={['container', className]} {...rest}>
  <slot />
</Tag>
