import { Popover } from '@primitivekit/react';

<Popover
  content={
    <div>
      <h4>Popover Title</h4>
      <p>This is the popover content</p>
    </div>
  }
>
  <Button>Click me</Button>
</Popover>

// Click trigger (default)
<Popover trigger="click" content="Click popover">
  <Button>Click</Button>
</Popover>

// Hover trigger
<Popover trigger="hover" content="Hover popover">
  <Button>Hover</Button>
</Popover>

// Focus trigger
<Popover trigger="focus" content="Focus popover">
  <Button>Focus</Button>
</Popover>

<Popover content="Top popover" placement="top">
  <Button>Top</Button>
</Popover>

<Popover content="Right popover" placement="right">
  <Button>Right</Button>
</Popover>

<Popover content="Bottom popover" placement="bottom">
  <Button>Bottom</Button>
</Popover>

<Popover content="Left popover" placement="left">
  <Button>Left</Button>
</Popover>

<Popover
  title="Popover Title"
  content="This is the popover content with a title"
>
  <Button>Show Popover</Button>
</Popover>

import { useState } from 'react';

function ControlledPopover() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Popover
      isOpen={isOpen}
      onOpenChange={setIsOpen}
      content={
        <div>
          <p>Controlled popover content</p>
          <Button onClick={() => setIsOpen(false)}>Close</Button>
        </div>
      }
    >
      <Button>Toggle Popover</Button>
    </Popover>
  );
}

<Popover
  content="Custom popover"
  style={{
    '--popover-bg': 'rgba(255, 255, 255, 1)',
    '--popover-border-color': 'rgba(200, 200, 200, 1)',
    '--popover-box-shadow': '0 4px 12px rgba(0, 0, 0, 0.15)',
    '--popover-border-radius': '8px',
  }}
>
  <Button>Show Popover</Button>
</Popover>

<Popover
  trigger="hover"
  content={
    <div style={{ padding: '16px', minWidth: '200px' }}>
      <Avatar src="/avatar.jpg" size="large" />
      <h4>John Doe</h4>
      <p>Software Engineer</p>
      <Button size="small" fullWidth>View Profile</Button>
    </div>
  }
>
  <Avatar src="/avatar.jpg" />
</Popover>