import React from "react";
import styled from "styled-components";
import { theme } from "../../../css/globalStyle";

// Divider component that can be either horizontal or vertical
// m stands for margin i.e. mr = margin right. I will possibly simplify margin
// to spacing when I move this to the component library

interface Props {
  my?: string;
  mx?: string;
  ml?: string;
  mr?: string;
  mt?: string;
  mb?: string;
  color?: string;
  horizontal?: boolean;
  vertical?: boolean;
  dotted?: boolean;
  dashed?: boolean;
  thickness?: number;
  width?: string;
}

const SDivider = styled.div<Props>`
  width: ${props =>
    props.horizontal && !props.vertical ? props.width : `${props.thickness}px`};
  height: ${props => props.vertical && "100%"};
  border-bottom: ${props =>
    `${
      props.horizontal &&
      (props.dotted ? "dotted" : props.dashed ? "dashed" : "solid")
    } ${props.thickness}px`};
  border-right: ${props =>
    `${
      props.vertical &&
      (props.dotted ? "dotted" : props.dashed ? "dashed" : "solid")
    } ${props.thickness}px`};
  border-color: ${props => props.color};
  margin-top: ${props => props.my || props.mt};
  margin-bottom: ${props => props.my || props.mb};
  margin-right: ${props => props.mx || props.mr};
  margin-left: ${props => props.mx || props.ml};
`;

export const Divider = ({
  horizontal = true,
  thickness = 1,
  width = "100%",
  color = theme.color.grey[400],
  ...rest
}: Props) => {
  return (
    <SDivider
      horizontal={horizontal}
      thickness={thickness}
      width={width}
      color={color}
      {...rest}
    />
  );
};
