import type { ReactNode } from 'react';
import { Button, Input, Label, Popover, PopoverContent, PopoverTrigger } 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>
);

export const Open = () => (
  <Surface>
    <div className="flex h-64 items-start justify-center">
      <Popover defaultOpen modal={false}>
        <PopoverTrigger asChild>
          <Button variant="outline">Rename site</Button>
        </PopoverTrigger>
        <PopoverContent className="w-72" onOpenAutoFocus={(e) => e.preventDefault()}>
          <div className="flex flex-col gap-3">
            <div className="text-sm font-medium">Rename site</div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="pop-name">Display name</Label>
              <Input id="pop-name" defaultValue="Cloudrite marketing" />
            </div>
            <Button size="sm">Save</Button>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  </Surface>
);