import type { ReactNode } from 'react';
import { Label, RadioGroup, RadioGroupItem } 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 Default = () => (
  <Surface>
    <RadioGroup defaultValue="business">
      {[
        ['starter', 'Starter — 1 site'],
        ['business', 'Business — 10 sites'],
        ['vps', 'Dedicated VPS'],
      ].map(([value, label]) => (
        <Label key={value} className="flex items-center gap-2 font-normal">
          <RadioGroupItem value={value} />
          {label}
        </Label>
      ))}
    </RadioGroup>
  </Surface>
);

export const Disabled = () => (
  <Surface>
    <RadioGroup defaultValue="remote" disabled>
      <Label className="flex items-center gap-2 font-normal">
        <RadioGroupItem value="remote" />
        Remote support
      </Label>
      <Label className="flex items-center gap-2 font-normal">
        <RadioGroupItem value="onsite" />
        On-site callout
      </Label>
    </RadioGroup>
  </Surface>
);