Popover

<Popover
  trigger={
    <Button type="secondary" medium>
      Open Popover
    </Button>
  }
>
  <div
    style={{
      color: 'var(--geist-background)',
      borderRadius: 'var(--geist-radius)',
      width: 200,
      padding: 'var(--geist-gap)',
      background: 'var(--geist-foreground)'
    }}
  >
    Tooltip content
  </div>
</Popover>

<Popover
  disabled
  trigger={
    <Button type="secondary" medium disabled>
      Open Popover
    </Button>
  }
>
  <p>This content will not appear on click</p>
</Popover>

<Popover
  overlay
  trigger={
    <Button type="secondary" medium>
      Open Popover
    </Button>
  }
>
  <div
    style={{
      color: 'var(--geist-background)',
      borderRadius: 'var(--geist-radius)',
      width: 200,
      padding: 'var(--geist-gap)',
      background: 'var(--geist-foreground)'
    }}
  >
    Tooltip content
  </div>
</Popover>

<Popover
  onOpen={() => alert('You opened the popover!')}
  trigger={
    <Button type="secondary" medium>
      Open Popover
    </Button>
  }
>
  <div
    style={{
      color: 'var(--geist-background)',
      borderRadius: 'var(--geist-radius)',
      width: 200,
      padding: 'var(--geist-gap)',
      background: 'var(--geist-foreground)'
    }}
  >
    Tooltip content
  </div>
</Popover>

() => {
  const [anchorVertical, setAnchorVertical] = useState('top')
  const [anchorHorizontal, setAnchorHorizontal] = useState('right')
  const [transformVertical, setTransformVertical] = useState('top')
  const [transformHorizontal, setTransformHorizontal] = useState('left')
  const [debug, setDebug] = useState(true)
  return (
    <Container>
      <Container left>
        <Popover
          debug={debug}
          anchorOrigin={{
            vertical: anchorVertical,
            horizontal: anchorHorizontal
          }}
          transformOrigin={{
            vertical: transformVertical,
            horizontal: transformHorizontal
          }}
          trigger={
            <Button type="secondary" medium>
              Open Popover
            </Button>
          }
        >
          <div
            style={{
              color: 'var(--geist-background)',
              borderRadius: 'var(--geist-radius)',
              width: 200,
              padding: 'var(--geist-gap)',
              background: 'var(--geist-foreground)'
            }}
          >
            Tooltip content
          </div>
        </Popover>
      </Container>
      <Spacer />
      <Container direction={['column', 'column', 'row']}>
        <Container>
          <Text h4 noMargin>
            anchorOrigin.vertical
          </Text>
          <Radio
            name="anchor-vertical"
            checked={anchorVertical}
            onChange={v => setAnchorVertical(v)}
            items={[
              {
                name: 'top',
                value: 'top'
              },
              {
                name: 'center',
                value: 'center'
              },
              {
                name: 'bottom',
                value: 'bottom'
              }
            ]}
          />
        </Container>
        <Container>
          <Text h4 noMargin>
            transformOrigin.vertical
          </Text>
          <Radio
            name="transform-vertical"
            checked={transformVertical}
            onChange={v => setTransformVertical(v)}
            items={[
              {
                name: 'top',
                value: 'top'
              },
              {
                name: 'center',
                value: 'center'
              },
              {
                name: 'bottom',
                value: 'bottom'
              }
            ]}
          />
        </Container>
      </Container>
      <Container direction={['column', 'column', 'row']}>
        <Container>
          <Text h4 noMargin>
            anchorOrigin.horizontal
          </Text>
          <Radio
            name="anchor-horizontal"
            checked={anchorHorizontal}
            onChange={v => setAnchorHorizontal(v)}
            items={[
              {
                name: 'left',
                value: 'left'
              },
              {
                name: 'center',
                value: 'center'
              },
              {
                name: 'right',
                value: 'right'
              }
            ]}
          />
        </Container>
        <Container>
          <Text h4 noMargin>
            transformOrigin.horizontal
          </Text>
          <Radio
            name="transform-horizontal"
            checked={transformHorizontal}
            onChange={v => setTransformHorizontal(v)}
            items={[
              {
                name: 'left',
                value: 'left'
              },
              {
                name: 'center',
                value: 'center'
              },
              {
                name: 'right',
                value: 'right'
              }
            ]}
          />
        </Container>
      </Container>
      <Container>
        <Text h4 noMargin>
          Debug Mode
        </Text>
        <label className="geist-inline-center">
          <Checkbox checked={debug} onChange={() => setDebug(!debug)} />
          <Spacer inline />
          <Text>Debug Mode (shows dot, disables click outside behavior)</Text>
        </label>
      </Container>
    </Container>
  )
}