import { clx } from '../helpers/utils'
import { FC } from 'react'
type Props = {
    image: string;
    title: string;
}

const LevelingCard: FC<Props> = (props: Props) => {
    const cardClass = clx(
        'rounded-[12px] border-2 border-white bg-white bg-opacity-30 size-[88px] flex items-center justify-center'
    );

    return (
        <div
            {...props} className={`${cardClass}`}>
            <div className='flex flex-col justify-center items-center gap-2'>
                <img className='w-8' src={props.image} alt="" />
                <p className='text-xs'>{props.title}</p>
            </div>
        </div>
    )
}

export default LevelingCard