import React from 'react';

interface Props {
  x: number;
  y: number;
  alive: boolean;
  disabled: boolean;
  toggle: (x: number, y: number) => void;
  cellSize: number;
}

const Cell = (props: Props) => {
  const { alive, toggle, x, y, disabled, cellSize } = props;
  return (
    <span
      onClick={() => (disabled ? null : toggle(x, y))}
      className={`cell ${alive ? 'alive' : 'dead'} ${
        disabled ? 'nonclickable' : 'clickable'
      }`}
      style={{ width: `${cellSize}px`, height: `${cellSize}px` }}
    ></span>
  );
};

export default Cell;