import React from "react";
import classNames from "classnames";
import { ORIENTATION } from "../../types";
import { Box, BoxProps } from "../Box";
import { bemHOF } from "../../utilities";

const cn = bemHOF("Divider");

export interface DividerProps extends BoxProps {
  direction?: ORIENTATION;
  dashed?: boolean;
  thick?: boolean;
}

type DirectionalDividerProps = {
  className: string;
};

const HorizontalDivider = ({ className, ...rest }: DividerProps) => (
  <Box as="hr" className={className} {...rest} />
);

const VerticalDivider = ({ className, ...rest }: DirectionalDividerProps) => (
  <Box className={className} {...rest} />
);

export const Divider = (props: DividerProps) => {
  const {
    direction = ORIENTATION.HORIZONTAL,
    dashed = false,
    thick = false,
    className,
    ...rest
  } = props;

  const styles = classNames([
    cn(),
    direction === ORIENTATION.VERTICAL && cn({ m: "vertical" }),
    dashed && cn({ m: "dashed" }),
    thick && cn({ m: "thick" }),
    className,
  ]);

  return direction === ORIENTATION.HORIZONTAL
    ? HorizontalDivider({ className: styles, ...rest })
    : VerticalDivider({ className: styles, ...rest });
};