Spacer

import { Spacer } from '@hey-mike/tungsten';
import { HeroSpecimen } from '../_components/HeroSpecimen';

function Box({ label }: { label: string }) {
  return (
    <div className="bg-brand-overlay-08 border border-brand-overlay-20 rounded-lg px-4 py-2 font-mono text-xs text-ink-2 shrink-0">
      {label}
    </div>
  );
}

export default function SpacerSnapshot() {
  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">Spacer</h1>

      <dl className="flex flex-col gap-10 px-8">
        <div>
          <dt className="text-ink-3 mb-2 font-mono text-xs">flex-grow (no size) · horizontal</dt>
          <dd className="m-0 flex items-center border border-stroke rounded-lg p-2">
            <Box label="left" />
            <Spacer />
            <Box label="right" />
          </dd>
        </div>

        <div>
          <dt className="text-ink-3 mb-2 font-mono text-xs">flex-grow · three items</dt>
          <dd className="m-0 flex items-center border border-stroke rounded-lg p-2">
            <Box label="start" />
            <Spacer />
            <Box label="middle" />
            <Spacer />
            <Box label="end" />
          </dd>
        </div>

        <div>
          <dt className="text-ink-3 mb-2 font-mono text-xs">size=4 · axis=y</dt>
          <dd className="m-0 flex flex-col border border-stroke rounded-lg p-2">
            <Box label="above" />
            <Spacer size={4} axis="y" />
            <Box label="below" />
          </dd>
        </div>

        <div>
          <dt className="text-ink-3 mb-2 font-mono text-xs">size=8 · axis=y</dt>
          <dd className="m-0 flex flex-col border border-stroke rounded-lg p-2">
            <Box label="above" />
            <Spacer size={8} axis="y" />
            <Box label="below" />
          </dd>
        </div>

        <div>
          <dt className="text-ink-3 mb-2 font-mono text-xs">size=6 · axis=x</dt>
          <dd className="m-0 flex items-center border border-stroke rounded-lg p-2">
            <Box label="left" />
            <Spacer size={6} axis="x" />
            <Box label="right" />
          </dd>
        </div>

        <div>
          <dt className="text-ink-3 mb-2 font-mono text-xs">fixed y sizes · 2 / 4 / 8 / 12</dt>
          <dd className="m-0 flex gap-6">
            {([2, 4, 8, 12] as const).map((s) => (
              <div key={s} className="flex flex-col items-center gap-0">
                <Box label="A" />
                <Spacer size={s} axis="y" className="bg-surface-2 border-x border-stroke w-full" />
                <Box label="B" />
                <span className="text-ink-3 font-mono text-xs mt-1">{s}</span>
              </div>
            ))}
          </dd>
        </div>
      </dl>

      {/* Gallery thumbnail (`?hero`): one framed left/right pair shows the
          flex-grow push. Hidden in the detail view; revealed by the hero CSS. */}
      <div data-hero-specimen className="hidden">
        <HeroSpecimen>
          {/* Explicit width (not w-full): the hero frame shrink-wraps to content
              otherwise, leaving the flex-grow Spacer no room to push the boxes apart. */}
          <div className="border-stroke flex w-[200px] items-center rounded-lg border p-2">
            <Box label="left" />
            <Spacer />
            <Box label="right" />
          </div>
        </HeroSpecimen>
      </div>
    </main>
  );
}