
import whiteBall from './ball-white.png'
import blueBall from './ball-blue.png'
import { IProps } from '@/common/Iprops.interface';
interface BallType extends IProps{
    color?: 'white'|'blue';
    size?:'small'|'normal'|'large';
}

const getBallSize = (size:string) => {
    console.log(size);
    
    switch(size){
        case 'small':
            return 'w-[6%] h-[6%]'
        case 'normal':
            return 'w-[12%] h-[12%]'
        case 'large':
            return 'w-[24%] h-[24%]'
    }
}

export const Ball =(props: BallType)=>{
    const {color,size} = props;
    const _color =  color?color:'white'
    const _size = size?size:'normal'
    const ballSize = getBallSize(_size)
    return(
        _color==='white'?
        <img src={whiteBall} className={ballSize} ></img>
        :
        <img src={blueBall} className={ballSize} ></img>
    )
}