import React, { FunctionComponent } from 'react';
import Color from 'color';
import { colors, space } from 'utils/theme';

import * as Styles from './divider.styles';
import { DividerProps } from './divider.types';

const color = Color(colors.backgroundDark).darken(0.1).hex();

const Divider: FunctionComponent<DividerProps> = (props): JSX.Element => <Styles.Divider {...props} />

Divider.defaultProps = {
  color,
  width: '100%',
  height: '1px',
  margin: space.xxsmall
};

export default Divider;