import React, { useState } from 'react';

const Color = ({ colorData, handler, boxColor }) => {
    const [style, setStyle] = useState(colorData.defaultStyle);

    const handleHover = (isHover) => {
        setStyle(isHover ? colorData.hoverStyle : colorData.defaultStyle);
    }

    return (
        <label onMouseEnter={() => handleHover(true)} onMouseLeave={() => handleHover(false)} style={style} className={`color ${boxColor === colorData.title ? "selected" : ""}`}>
            <input checked={boxColor === colorData.title} onChange={handler} type="radio" value={colorData.title}></input>
        </label>
    )
}

export default Color;