import type { ReactNode } from 'react';
import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'cloudrite';
import { Info } from 'lucide-react';

// 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>
);

// Tooltip must be inside TooltipProvider — outside one it throws rather than
// rendering, so the provider is part of every composition.
export const Open = () => (
  <Surface>
    <div className="flex h-40 items-end justify-center">
      <TooltipProvider>
        <Tooltip defaultOpen>
          <TooltipTrigger asChild>
            <Button variant="outline" size="icon" aria-label="About uptime">
              <Info />
            </Button>
          </TooltipTrigger>
          <TooltipContent side="top">Measured across all Auckland edge nodes</TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  </Surface>
);