import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import classNames from "classnames";
import { EnumTable } from "../../storybook-components/EnumTable";
import { Divider } from "./Divider";
import { Heading } from "../Heading";
import { Icon, ICON_TYPE } from "../Icon";
import { Flex } from "../Flex";
import { Text } from "../Text";
import { ORIENTATION } from "../../types";

<Meta title="Components/Layout/Divider" component={Divider} />

# Divider

<Preview>
  <Story name="Divider">
    <Divider />
  </Story>
</Preview>

## Custom Props

These are the custom props that extend `HTMLProps<HTMLDivElement>`. Full list of props <a href="#all-props">below</a>.

<Props of={Divider} />
<EnumTable enums={{ ORIENTATION }} />

### Vertical

<Preview>
  <Story name="Vertical">
    <Flex className="items-center">
      <Heading.H1>Heading</Heading.H1>
      <Divider
        className={classNames("h-8", "mx-2")}
        direction={ORIENTATION.VERTICAL}
      />
      <Text className="mr-1">Search</Text>
      <Icon className="mr-1" icon={ICON_TYPE.SEARCH} />
    </Flex>
  </Story>
</Preview>

### Dashed

<Preview>
  <Story name="Dashed">
    <Divider dashed />
  </Story>
</Preview>

### Thick

<Preview>
  <Story name="Thick">
    <Divider thick />
  </Story>
</Preview>

## All Props

<Props of={Divider} />