import React from 'react';
import './Cell.css';

function Cell({ row, col, hasShip, isHit, isMiss, isSunk, onClick }) {
  let className = 'cell';

  if (isSunk) {
    className += ' sunk';
  } else if (isHit) {
    className += ' hit';
  } else if (isMiss) {
    className += ' miss';
  } else if (hasShip) {
    className += ' has-ship';
  }

  const handleClick = () => {
    if (onClick) onClick(row, col);
  };

  return <div className={className} onClick={handleClick} />;
}

export default Cell;