import { Avatar, Typography } from 'antd';
import React from 'react';

const ComplexityAvatar = ({ name }) => {
    if (name === "easy") {
        return <div className='w-100'><Avatar className='center-grid mx-auto' style={{ backgroundColor: "#55B2FF" }} size="small" >
            <Typography.Text style={{color: "white" }}>E</Typography.Text>
        </Avatar></div>
    }
    if (name === "med") {
        return <div className='w-100'><Avatar className='center-grid  mx-auto' style={{ backgroundColor: "#52C41A" }} size="small" >
            <Typography.Text style={{color: "white" }}>M</Typography.Text>
        </Avatar></div>
    }
    if (name === "diff") {
        return <div className='w-100'><Avatar className='center-grid  mx-auto' style={{ backgroundColor: "#F8515B" }} size="small" >
            <Typography.Text style={{color: "white" }}>D</Typography.Text>
        </Avatar></div>
    }
}

export default ComplexityAvatar;
