import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core';
import { getEllipseColor, getEllipseHintColor } from '../../../utilities/style/utils/styleUtils';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: (props) => props.size === 'small' ? theme.spacing(4) : theme.spacing(5),
        height: (props) => props.size === 'small' ? theme.spacing(4) : theme.spacing(5),
        borderRadius: 50,
        border: (props) => (props.variant === 'filled' ? 'none' : `2px solid`),
        backgroundColor: (props) => props.variant === 'filled' && getEllipseHintColor(theme, props.color),
        borderColor: (props) => getEllipseColor(theme, props.color)
    }
}));
export const Ellipse = (props) => {
    const { children } = props;
    const classes = useStyles(props);
    return React.createElement("div", { className: classes.root }, children);
};
Ellipse.propTypes = {
    color: PropTypes.string,
    size: PropTypes.string,
    variant: PropTypes.string
};
//# sourceMappingURL=Ellipse.js.map