Container

import { Container } from '@hey-mike/tungsten';

const sizes = [
  { size: 'xs', maxW: 'max-w-2xl' },
  { size: 'sm', maxW: 'max-w-4xl' },
  { size: 'md', maxW: 'max-w-6xl' },
  { size: 'lg', maxW: 'max-w-7xl' },
] as const;

export default function ContainerSnapshot() {
  return (
    <main data-testid="snapshot-root" className="bg-page text-ink-1 min-h-screen py-8">
      <h1 className="text-ink-2 mb-8 px-8 font-mono text-sm uppercase tracking-widest">Container</h1>

      <dl className="flex flex-col gap-2">
        {sizes.map(({ size, maxW }) => (
          <div key={size}>
            <dt className="text-ink-3 mb-1 px-8 font-mono text-xs">{size} · {maxW}</dt>
            {/* Full-bleed stripe so the centering + max-width clipping is visible */}
            <dd className="bg-surface-2 m-0 py-3">
              <Container size={size}>
                <div className="bg-brand-overlay-08 border border-brand-overlay-20 rounded-lg py-2.5 text-center font-mono text-xs text-ink-2">
                  content area · px-4 sm:px-6
                </div>
              </Container>
            </dd>
          </div>
        ))}

        <div className="mt-6">
          <dt className="text-ink-3 mb-1 px-8 font-mono text-xs">rhythm · wide</dt>
          <dd className="bg-surface-2 m-0 py-3">
            <Container size="md" rhythm="wide">
              <div className="bg-brand-overlay-08 border border-brand-overlay-20 rounded-lg py-2.5 text-center font-mono text-xs text-ink-2">
                content area · px-5 sm:px-8 lg:px-10
              </div>
            </Container>
          </dd>
        </div>
      </dl>
    </main>
  );
}