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

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

const defaultDividerProps = {
  dashed: false,
  direction: ORIENTATION.HORIZONTAL,
  thick: false,
};

const HorizontalDivider = (props: DividerProps) => {
  const { className, dashed, thick, ...rest } = props;
  return (
    <Box
      as="hr"
      className={classNames(
        "border-gray-400",
        dashed && "border-dashed",
        thick && "border",
        className,
      )}
      {...rest}
    />
  );
};

const VerticalDivider = (props: DividerProps) => {
  const { className, dashed, thick, ...rest } = props;
  const dividerClasses = classNames([
    "border-l",
    "border-gray-400",
    "w-auto",
    dashed && "border-dashed",
    thick && "border",
    className,
  ]);
  return <Box className={dividerClasses} {...rest} />;
};

const Divider = (props: DividerProps) => {
  const {
    direction = ORIENTATION.HORIZONTAL,
    dashed = defaultDividerProps.dashed,
    thick = defaultDividerProps.thick,
    ...rest
  } = props;
  return direction === ORIENTATION.HORIZONTAL
    ? HorizontalDivider({ dashed, thick, ...rest })
    : VerticalDivider({ dashed, thick, ...rest });
};

Divider.defaultProps = defaultDividerProps;

export { Divider };