import type { ReactNode } from 'react';
import { Button, Spinner } from 'cloudrite';

// Cloudrite is dark-only — foreground-coloured text and `border-border` are
// invisible on the preview harness's white card body. Stories render on the
// brand surface, which is also how a real screen is built.
const Surface = ({ children }: { children: ReactNode }) => (
  <div className="bg-background text-foreground rounded-lg p-6">{children}</div>
);

export const Sizes = () => (
  <Surface>
    <div className="flex items-center gap-6 text-foreground">
      <Spinner />
      <Spinner className="size-6" />
      <Spinner className="size-10" />
      <Spinner className="size-10 text-primary" />
    </div>
  </Surface>
);

export const InButton = () => (
  <Surface>
    <Button disabled>
      <Spinner />
      Provisioning server…
    </Button>
  </Surface>
);