import styled from 'styled-components';
import { color as colorProp } from 'styled-system';

export interface HrProps {
  color?: string;
  height?: number;
}

export const Hr = styled.hr<HrProps>(colorProp, props => ({
  width: '100%',
  background: 'none',
  border: `${(props.height ? props.height : 2) / 2}px solid currentColor`,
  borderRadius: `${(props.height ? props.height : 2) / 2}px`,
  margin: `calc(${props.theme.space.gridGap} / 2) auto`,
}));

Hr.defaultProps = {
  color: 'gray.4',
  height: 2,
};
