import type { ReactNode } from 'react';
import { Label, Switch } 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">
      <Switch />
      <Switch defaultChecked />
      <Switch disabled />
      <Switch defaultChecked disabled />
    </div>
  </Surface>
);

export const WithLabels = () => (
  <Surface>
    <div className="flex flex-col gap-4">
      {[
        ['auto-updates', 'Automatic WordPress updates', true],
        ['maintenance', 'Maintenance mode', false],
        ['alerts', 'Downtime SMS alerts', true],
      ].map(([id, label, on]) => (
        <div key={id as string} className="flex items-center justify-between gap-8">
          <Label htmlFor={id as string} className="font-normal">
            {label}
          </Label>
          <Switch id={id as string} defaultChecked={on as boolean} />
        </div>
      ))}
    </div>
  </Surface>
);