import React, {useState} from 'react';

export default function Cell({spec, rowIndex, cellIndex, showSolution}) {
    const [mark, setMark] = useState(false);
    let classes = "cell r" + rowIndex + " c" + cellIndex;
    if (spec.top) classes += " top";
    if (spec.right) classes += " right";
    if (spec.bottom) classes += " bottom";
    if (spec.left) classes += " left";
    if (spec.solution && showSolution) classes += " solution";
    if (mark) classes += " user";
    return (
        <div className={classes}
             onMouseEnter={(e) => {
                 const leftPressed = e.buttons & 0x1;
                 if (leftPressed) {
                     setMark(!mark);
                 }
             }}
             onMouseLeave={(e) => {
                 const leftPressed = e.buttons & 0x1;
                 if (leftPressed) {
                 }
             }}
             onClick={(e) => {
                 setMark(!mark);
             }}/>
    );
}