## Some code

import React, { useState, useEffect } from "react";
import "./App.css";
import { shuffleDeck, getCardValue, calculateScore } from "./utils";

function App() {
  const [deck, setDeck] = useState([]);
  const [dealerCards, setDealerCards] = useState([]);
  const [playerCards, setPlayerCards] = useState([]);
  const [playerScore, setPlayerScore] = useState(0);
  const [dealerScore, setDealerScore] = useState(0);
  const [gameStatus, setGameStatus] = useState("start");
  const [score, setScore] = useState(0);

  useEffect(() => {
    setDeck(shuffleDeck());
  }, []);

  useEffect(() => {
    setPlayerScore(calculateScore(playerCards));
  }, [playerCards]);

  useEffect(() => {
    setDealerScore(calculateScore(dealerCards));
  }, [dealerCards]);

  const startGame = () => {
    setDealerCards([deck[0], deck[2]]);
    setPlayerCards([deck[1], deck[3]]);
    setDeck(deck.slice(4));
    setGameStatus("inProgress");
  };

  const hit = () => {
    setPlayerCards([...playerCards, deck[0]]);
    setDeck(deck.slice(1));
  };

  const stand = () => {
    while (dealerScore < 17) {
      setDealerCards([...dealerCards, deck[0]]);
      setDeck(deck.slice(1));
    }
    if (dealerScore > 21 || dealerScore < playerScore) {
      setScore(score + 1);
    } else if (dealerScore > playerScore) {
      setScore(score - 1);
    }
    setGameStatus("gameOver");
  };

  const reset = () => {
    setDealerCards([]);
    setPlayerCards([]);
    setPlayerScore(0);
    setDealerScore(0);
    setGameStatus("start");
  };

  return (
    <div className="App">
      <h1>Blackjack</h1>
      {gameStatus === "start" && (
        <button onClick={startGame}>Start Game</button>
      )}
      {gameStatus === "inProgress" && (
        <>
          <h2>Dealer's Hand:</h2>
          {dealerCards.map((card, index) => (
            <div key={index} className="card">
              {card}
            </div>
          ))}
          <h2>Your Hand:</h2>
          {playerCards.map((card, index) => (
            <div key={index} className="card">
              {card}
            </div>
          ))}
          <div>
            <button onClick={hit}>Hit</button>
            <button onClick={stand}>Stand</button>
          </div>
        </>
      )}
      {gameStatus === "gameOver" && (
        <>
          <h2>Dealer's Hand:</h2>
          {dealerCards.map((card, index) => (
            <div key={index} className="card">
              {card}
            </div>
          ))}
          <h2>Your Hand:</h2>
          {playerCards.map((card, index) => (
            <div key={index} className="card">
              {card}
            </div>
          ))}
          <h2>{dealerScore > 21 || dealerScore < playerScore ? "You win!" : "You lose!"}</h2>
          <h2>Score: {score}</h2>
          <button onClick={reset}>Play Again</button>
        </>
      )}