// Add styles with your preferred CSS technology
const TooltipContent = styled(Tooltip.Content, {
  backgroundColor: 'black',
  borderRadius: '3px',
  padding: '5px'
});

const PopoverContent = styled(Popover.Content, {
  backgroundColor: 'white',
  boxShadow: '0 2px 10px -3px rgb(0 0 0 / 20%)',
  borderRadius: '3px',
});

const DialogContent = styled(Dialog.Content, {
  backgroundColor: 'white',
  boxShadow: '0 3px 15px -4px rgb(0 0 0 / 30%)',
  borderRadius: '5px',
});

// Compose a custom Tooltip component
export const StatusTooltip = ({ state, label }) => {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger asChild>
        <Text>
          <Status variant={state} />
        </Text>
      </Tooltip.Trigger>
      <Tooltip.Portal>
        <TooltipContent>
          <Tooltip.Arrow />
          {label}
        </TooltipContent>
      </Tooltip.Portal>
    </Tooltip.Root>
  );
};

// Compose a Popover with custom focus and positioning
export const StatusPopover = ({ children }) => {
  const popoverCloseButton = React.useRef(null);
  return (
    <Popover.Root>
      <Popover.Trigger>View status</Popover.Trigger>
      <Popover.Portal>
        <PopoverContent
          align="start"
          collisionPadding={10}
          onOpenAutoFocus={(event) => {
            // Focus the close button when popover opens
            popoverCloseButton.current?.focus();
            event.preventDefault();
          }}
        >
          {children}
          <Popover.Close ref={popoverCloseButton}>
            Close
          </Popover.Close>
        </PopoverContent>
      </Popover.Portal>
    </Popover.Root>
  );
};

// Compose a Dialog with custom focus management
export const InfoDialog = ({ children }) => {
  const dialogCloseButton = React.useRef(null);
  return (
    <Dialog.Root>
      <Dialog.Trigger>View details</Dialog.Trigger>
      <Dialog.Overlay />
      <Dialog.Portal>
        <DialogContent
          onOpenAutoFocus={(event) => {
            // Focus the close button when dialog opens
            dialogCloseButton.current?.focus();
            event.preventDefault();
          }}
        >
          {children}
          <Dialog.Close ref={dialogCloseButton}>
            Close
          </Dialog.Close>
        </DialogContent>
      </Dialog.Portal>
    </Dialog.Root>
  );
};