import type { ReactNode } from 'react';
import { Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from 'cloudrite';
import { Copy, RefreshCw, Trash2 } 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 Horizontal = () => (
  <Surface>
    <ButtonGroup>
      <Button variant="outline">Day</Button>
      <Button variant="outline">Week</Button>
      <Button variant="outline">Month</Button>
    </ButtonGroup>
  </Surface>
);

export const WithIcons = () => (
  <Surface>
    <ButtonGroup>
      <Button variant="outline" size="icon" aria-label="Refresh">
        <RefreshCw />
      </Button>
      <Button variant="outline" size="icon" aria-label="Duplicate">
        <Copy />
      </Button>
      <ButtonGroupSeparator />
      <Button variant="outline" size="icon" aria-label="Delete">
        <Trash2 />
      </Button>
    </ButtonGroup>
  </Surface>
);

export const WithText = () => (
  <Surface>
    <ButtonGroup>
      <ButtonGroupText>https://</ButtonGroupText>
      <Button variant="outline">cloudrite.co.nz</Button>
    </ButtonGroup>
  </Surface>
);

export const Vertical = () => (
  <Surface>
    <ButtonGroup orientation="vertical">
      <Button variant="outline">Restart</Button>
      <Button variant="outline">Rebuild</Button>
      <Button variant="outline">Snapshot</Button>
    </ButtonGroup>
  </Surface>
);
