import type { ReactNode } from 'react';
import { Stack } from './Stack';
import { Card } from '../Card/Card';
import { Button } from '../Button/Button';
import { Badge } from '../Badge/Badge';

const Box = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      padding: 'var(--ds-space-xs) var(--ds-space-sm)',
      background: 'var(--ds-color-surface-sunken)',
      border: '1px solid var(--ds-color-border)',
      borderRadius: 'var(--ds-radius-sm)',
    }}
  >
    {children}
  </div>
);

export function Vertical() {
  return (
    <Stack gap="sm" style={{ maxWidth: 240 }}>
      <Box>First</Box>
      <Box>Second</Box>
      <Box>Third</Box>
    </Stack>
  );
}

export function Horizontal() {
  return (
    <Stack direction="horizontal" gap="sm" align="center">
      <Box>One</Box>
      <Box>Two</Box>
      <Box>Three</Box>
    </Stack>
  );
}

export function GapScale() {
  return (
    <Stack gap="md">
      {(['2xs', 'xs', 'sm', 'md', 'lg'] as const).map((gap) => (
        <Stack key={gap} direction="horizontal" gap={gap} align="center">
          <span style={{ width: 40, color: 'var(--ds-color-text-muted)' }}>{gap}</span>
          <Box>A</Box>
          <Box>B</Box>
          <Box>C</Box>
        </Stack>
      ))}
    </Stack>
  );
}

/** `justify="between"` pushes the two ends apart — the common toolbar layout. */
export function SpaceBetween() {
  return (
    <Card padding="md" style={{ maxWidth: 420 }}>
      <Stack direction="horizontal" justify="between" align="center" gap="md">
        <Stack direction="horizontal" gap="xs" align="center">
          <strong>Production</strong>
          <Badge tone="success" dot>Live</Badge>
        </Stack>
        <Button size="sm" variant="secondary">Redeploy</Button>
      </Stack>
    </Card>
  );
}