import { range } from "../../utils";
import { checkGuess } from "../../game-helpers";

function Cell({ letter, status }) {
  const definedClassName = status.length > 0 ? `cell ${status}` : "cell";
  return <span className={definedClassName}>{letter}</span>;
}

function CurrentGuess({ value, answer }) {
  const result = checkGuess(value, answer);
  console.log({ answer }, { result });
  return (
    <p className="guess">
      {range(5).map((num) => (
        <Cell
          key={num}
          letter={result ? result[num].letter : ""}
          status={result ? result[num].status : ""}
        />
      ))}
    </p>
  );
}

export default CurrentGuess;