import { Spinner } from './Spinner';
import { Stack } from '../Stack/Stack';
import { Card } from '../Card/Card';

export function Sizes() {
  return (
    <Stack direction="horizontal" gap="md" align="center">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </Stack>
  );
}

/** The spinner takes its colour from the surrounding text colour. */
export function InheritsColor() {
  return (
    <Stack direction="horizontal" gap="md" align="center">
      <span style={{ color: 'var(--ds-color-accent)' }}>
        <Spinner />
      </span>
      <span style={{ color: 'var(--ds-color-danger)' }}>
        <Spinner />
      </span>
      <span style={{ color: 'var(--ds-color-text-muted)' }}>
        <Spinner />
      </span>
    </Stack>
  );
}

export function LoadingPanel() {
  return (
    <Card padding="lg" style={{ maxWidth: 320 }}>
      <Stack gap="sm" align="center">
        <Spinner size="lg" label="Loading deployments" />
        <span style={{ color: 'var(--ds-color-text-muted)' }}>Loading deployments…</span>
      </Stack>
    </Card>
  );
}