import type { ReactNode } from 'react';
import { Toggle } from 'cloudrite';
import { Bold, Italic, Underline } 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 States = () => (
  <Surface>
    <div className="flex items-center gap-2">
      <Toggle aria-label="Bold">
        <Bold />
      </Toggle>
      <Toggle defaultPressed aria-label="Italic">
        <Italic />
      </Toggle>
      <Toggle disabled aria-label="Underline">
        <Underline />
      </Toggle>
    </div>
  </Surface>
);

export const Outline = () => (
  <Surface>
    <div className="flex items-center gap-2">
      <Toggle variant="outline">Auto-renew</Toggle>
      <Toggle variant="outline" defaultPressed>
        Maintenance mode
      </Toggle>
    </div>
  </Surface>
);

export const Sizes = () => (
  <Surface>
    <div className="flex items-center gap-2">
      <Toggle size="sm" defaultPressed aria-label="Small">
        <Bold />
      </Toggle>
      <Toggle size="default" defaultPressed aria-label="Default">
        <Bold />
      </Toggle>
      <Toggle size="lg" defaultPressed aria-label="Large">
        <Bold />
      </Toggle>
    </div>
  </Surface>
);