import styled from 'styled-components';

import {
  variant,
  compose,
  space,
  layout,
  border,
  flexbox,
} from 'styled-system';
import { withTheme } from '../styles';

const HorizontalRuleComponent = styled('hr')(
  {
    borderBottom: 0,
    borderTop: '0.01rem',
    borderStyle: 'solid',
  },
  compose(space, layout, border, flexbox),
  variant({
    variants: {
      primary: {
        borderColor: 'primary.light',
      },
      secondary: {
        borderColor: 'primary.superLight',
      },
      separator: {
        borderColor: 'colorPalette.gray.g100',
      },
    },
  }),
);

HorizontalRuleComponent.defaultProps = {
  mt: 0,
  mb: 0,
  variant: '',
};

HorizontalRuleComponent.displayName = 'HR';

export default withTheme(HorizontalRuleComponent);