import type { ReactNode } from 'react';
import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Input,
  Label,
} from 'cloudrite';

// Cloudrite is dark-only — the overlay surfaces read correctly only against the
// brand background, not the harness's white card body.
const Surface = ({ children }: { children: ReactNode }) => (
  <div className="bg-background text-foreground rounded-lg p-6">{children}</div>
);

// `defaultOpen` is what makes the card worth looking at — a bare trigger shows
// none of Dialog's parts. Paired with cardMode:single in .design-sync/config.json.
export const Open = () => (
  <Surface>
    <Dialog defaultOpen modal={false}>
      <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
        <DialogHeader>
          <DialogTitle>Add a site</DialogTitle>
          <DialogDescription>
            We'll point the DNS and issue an SSL certificate automatically.
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-2">
          <Label htmlFor="dlg-domain">Domain</Label>
          <Input id="dlg-domain" defaultValue="cloudrite.co.nz" />
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button>Add site</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </Surface>
);