import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import space from 'Components/utils/styles/space';
import statusTypes from 'Components/utils/types/statusTypes';
import { notificationColor } from 'Themes/utils/colorPickers';
import { textSize } from 'Themes/utils/fontPickers';

const color = ({ type }) => css`
  ${notificationColor(type)}
`;

const StyledStatus = styled.span`
  position: relative;
  font-weight: bold;
  font-size: ${textSize('S')};
  padding-left: 16px;
  color: ${color};
  ${space}

  :before {
    content: '';
    position: absolute;
    background-color: ${color};
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 50%;
    margin-top: -5px;
    left: 0;
  }
`;

const Status = ({ children, ...props }) => {
  return <StyledStatus {...props}>{children}</StyledStatus>;
};

Status.propTypes = {
  type: PropTypes.oneOf(statusTypes),
};

Status.defaultProps = {
  type: 'success',
};

Status.displayName = 'Status';

export default Status;
