import type { ReactNode } from 'react';
import { Badge } from 'cloudrite';
import { Check, CircleAlert } from 'lucide-react';

// 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 Variants = () => (
  <Surface>
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  </Surface>
);

export const InContext = () => (
  <Surface>
    <div className="flex flex-wrap items-center gap-2">
      <Badge>
        <Check />
        Online
      </Badge>
      <Badge variant="secondary">NZ Hosted</Badge>
      <Badge variant="destructive">
        <CircleAlert />
        Expired
      </Badge>
      <Badge variant="outline">v16.2.0</Badge>
    </div>
  </Surface>
);