import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Reference } from "../Reference";
import { Text } from "../Text";
import { Flex } from "../Flex";
import { Heading } from "../Heading";
import { Input } from "../Input";
import { Icon, ICON_TYPE } from "../Icon";
import { Box } from "../Box";
import { Popover } from "./Popover";

<Meta title="Components/Popovers/Popover" component={Popover} />

<ComponentHeading
  componentName="Popover"
  description="Creates a generic popover positioned on a given reference element"
  sourcePath="src/components/Popover/Popover.tsx"
/>

```jsx
import { Popover } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Popover">
    <Box className="min-h-24">
      <Popover
        placement="bottom-start"
        referenceElement={<Reference>A.9.4.1</Reference>}
        isVisible
      >
        <Text as="span" className="text-bodySm font-medium text-gray-700">
          Requirement
        </Text>
        <Flex className="items-center mt-1">
          <Heading.H4>ISO 27001:2013</Heading.H4>
          <Icon
            icon={ICON_TYPE.CHEVRON_RIGHT}
            className="text-gray-600 text-iconSm mx-1"
          />
          <Heading.H4>A.9.4.1 - Information Access Restriction</Heading.H4>
        </Flex>
      </Popover>
    </Box>
  </Story>
</Preview>

## Props

<Props of={Popover} />

## Demos

### With Arrow

<Preview>
  <Story name="Popover with arrow">
    <Popover
      placement="right"
      referenceElement={<Input className="w-40" type="text" />}
      showArrow
      isVisible
    >
      This field is required
    </Popover>
  </Story>
</Preview>

### Inline

<Preview>
  <Story name="Popover Inline">
    <Popover placement="top" inline>
      Error: something went wrong
    </Popover>
  </Story>
</Preview>