import { Meta } from '@storybook/addon-docs'

<Meta title="@baseapp-frontend | designSystem/Popovers/Popover" />

# Component Documentation

## Popover

- **Purpose**: A customized wrapper around MUI's Popover component that provides consistent positioning and styling, with an optional arrow indicator. It's used for displaying floating content like menus and tooltips with precise positioning control.
- **Expected Behavior**: Renders a popover anchored to a specified element (currently only AccountPopover), with configurable arrow placement and positioning.

## Use Cases

- **Current Usage**:
  - AccountPopover

## Props

- **open** (HTMLElement | null): The anchor element to position the popover against
- **children** (ReactNode): Content to render inside the popover
- **arrow** (string, optional): Position of the arrow indicator (default: 'top-right')
- **hiddenArrow** (boolean, optional): Whether to hide the arrow indicator
- **sx** (object, optional): Additional styles to apply to the popover
- **...other**: All other props are passed to MUI Popover

## Notes

- **Related Components**:
  - AccountPopover: Uses Popover internally for dropdown menus

## Example Usage

```javascript
import { Popover } from '@baseapp-frontend/design-system/web'

const MyComponent = () => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = () => {
    setAnchorEl(null)
  }

  return (
    <Popover open={anchorEl} onClose={handleClose}>
      <div>This is the content of the Popover</div>
    </Popover>
  )
}
export default MyComponent
```