import type { ReactNode } from 'react';
import { Separator } 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 Horizontal = () => (
  <Surface>
    <div className="w-80">
      <div className="text-sm font-medium">Cloud Hosting</div>
      <div className="text-sm text-muted-foreground">Proudly hosted in New Zealand.</div>
      <Separator className="my-4" />
      <div className="text-sm text-muted-foreground">From $29/month</div>
    </div>
  </Surface>
);

export const Vertical = () => (
  <Surface>
    <div className="flex h-6 items-center gap-4 text-sm">
      <span>Services</span>
      <Separator orientation="vertical" />
      <span>Hosting</span>
      <Separator orientation="vertical" />
      <span>Support</span>
    </div>
  </Surface>
);