import {styled} from '@mui/material/styles';
import {IProgressCircle} from '../progress-circle.type';
import {TypographyComponent} from '../../../atoms';
import {ProgressCircleSizeStyle as sizes} from './progress-circle-size.style';

const Container = styled('div')<Omit<IProgressCircle, 'value'>>`
    ${({size}) => sizes[size || 'md'].container};
    position: relative;

    & .title {
        ${({size}) => sizes[size || 'md'].title};
    }

    & .value {
        ${({size}) => sizes[size || 'md'].value};
    }

    * {
        outline: none;
    }
`;

const Title = styled(TypographyComponent)`
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: ${({theme}) => theme.palette.typography[500]};
    font-weight: 500;
`;

const Value = styled(TypographyComponent)`
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: ${({theme}) => theme.palette.typography[700]};
    text-align: center;
    font-weight: 500;
`;

export const ProgressCircleStyle = {
    Container,
    Title,
    Value,
};