import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import { Box, Text } from '../themes/components';
const NotificationCircle = ({ number, color }) => {
    const { colors } = useContext(ThemeContext);
    let width = 18;
    const height = 18;
    const borderRadius = 9;
    if (number > 10 && number < 99) {
        width = 25;
    }
    if (number > 99) {
        width = 29;
    }
    return (
    // Border Radius not changer because this is a circle
    <Box height={height} width={width} borderRadius={borderRadius} backgroundColor={color || colors.danger['500']} display="flex" alignItems="center" justifyContent="center">

			<Text fontWeight="bold" fontSize={12} mr={3} mb={1}>{number}</Text>
		</Box>);
};
NotificationCircle.defaultProps = {
    color: null,
};
export default NotificationCircle;
//# sourceMappingURL=notificationCircle.js.map