import { h, Component } from 'preact'

export default function ButtonGrid(props) {
  const max = props.max || Infinity
  return (
    <table className='buttonGrid'>
      <tr className='row'>
        <th>{" "}</th>
        {props.x.map(x => (
          <th>{x}</th>
        ))}
      </tr>          
      {props.y.map(y => (
        <tr className='row'>
          <th>{y}</th>
          {props.x.map(x => (
            <td>
              {x * y > max ? " " :
                <button
                  onClick={() => props.onClick(x, y)}
                  onMouseEnter={() => props.onHover(x, y)}
                >
                  {" "}
                </button>
              }
            </td>
          ))}
        </tr>
      ))}
    </table>
  )
}