import type { ReactNode } from 'react';
import { Checkbox, Label } 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 States = () => (
  <Surface>
    <div className="flex items-center gap-6">
      <Checkbox />
      <Checkbox defaultChecked />
      <Checkbox disabled />
      <Checkbox defaultChecked disabled />
    </div>
  </Surface>
);

export const WithLabels = () => (
  <Surface>
    <div className="flex flex-col gap-3">
      {[
        ['backups', 'Nightly off-site backups', true],
        ['ssl', 'Managed SSL certificate', true],
        ['cdn', 'Global CDN', false],
      ].map(([id, label, on]) => (
        <Label key={id as string} className="flex items-center gap-2 font-normal">
          <Checkbox id={id as string} defaultChecked={on as boolean} />
          {label}
        </Label>
      ))}
    </div>
  </Surface>
);