import type { ReactNode } from 'react';
import { Label, Slider } 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>
    <Slider className="w-72" defaultValue={[60]} max={100} step={1} />
  </Surface>
);

export const WithLabel = () => (
  <Surface>
    <div className="flex w-72 flex-col gap-3">
      <div className="flex items-center justify-between text-sm">
        <Label>Storage</Label>
        <span className="text-muted-foreground">40 GB</span>
      </div>
      <Slider defaultValue={[40]} max={200} step={10} />
    </div>
  </Surface>
);

export const Range = () => (
  <Surface>
    <Slider className="w-72" defaultValue={[25, 75]} max={100} step={5} />
  </Surface>
);
