import {
  Meta,
  Canvas,
  ArgsTable,
  Story,
  SourceState,
} from "@storybook/blocks";
import classNames from "classnames";
import { ComponentHeading, EnumTable } from "../../storybook-components";
import { ORIENTATION } from "../../types";
import { Divider, Flex, Heading, Icon, ICON_TYPE, Text } from "../..";

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

<ComponentHeading
  componentName="Divider"
  description="Provides an HTML hr element"
  sourcePath="src/components/Divider/Divider.tsx"
/>

<Canvas withSource={SourceState.OPEN}>
  <Story name="Divider">
    <Divider />
  </Story>
</Canvas>

## API

These are the custom props that extend `HTMLProps<HTMLDivElement>`.

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

## Demos

### Vertical

<Canvas withSource={SourceState.OPEN}>
  <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>
</Canvas>

### Dashed

<Canvas withSource={SourceState.OPEN}>
  <Story name="Dashed">
    <Divider dashed />
  </Story>
</Canvas>

### Thick

<Canvas withSource={SourceState.OPEN}>
  <Story name="Thick">
    <Divider thick />
  </Story>
</Canvas>