import { CSSProperties } from 'react'

import handStarsIcon from '../assets/handStars.svg'

type PointsProps = {
    points?: number
}

const styles = {
    container: {
        paddingBottom: 8,
    } as CSSProperties,
    points: {
        float: 'right',
    } as CSSProperties,
    icon: {
        height: 24,
        paddingBottom: 5,
    } as CSSProperties,
}

function Points({ points }: PointsProps) {
    return (
        <div style={styles.container}>
            <h5>
                Набрано очков: 
                <span style={styles.points}><img style={styles.icon} src={handStarsIcon} alt='Hand giving stars icon' /> {points}</span>
            </h5>
        </div>
    )
}

export default Points
