-- Component: HangmanDrawing --

export default function HangmanDrawing({ incorrect }: IncorrectType) {
    return (
        <div style={{ width: "100%", height: "350px" }}>
            <div style={wrapperStyle}>{hangmanParts.slice(0, incorrect)}</div>
        </div>
    );
}

-- Component: Keyboard --

export default function Keyboard({
    setGuessedLetters,
    guessedLetters,
}: SetGuessedLettersType) {
    return (
        <div style={wrapperStyle}>
            <div style={containerStyle}>
                {alphabetArray.map((letter: string) => (
                    <button
                        key={letter}
                        style={buttonStyle}
                        onClick={() => {
                            if (guessedLetters.includes(letter)) return;
                            setGuessedLetters((prev) => [...prev, letter]);
                        }}
                    >
                        {letter}
                    </button>
                ))}
            </div>
        </div>
    );
}

-- Component: WordToGuess --

export default function WordToGuess({ word, guessedLetters }: WordType) {
    return (
        <div>
            {word?.split("").map((letter: string, index: number) => (
                <span
                    key={index}
                    style={{ borderBottom: ".3rem solid black", margin: "2px" }}
                >
                    <span
                        style={{
                            visibility: guessedLetters.includes(letter)
                                ? "visible"
                                : "hidden",
                        }}
                    >
                        {letter}
                    </span>
                </span>
            ))}
        </div>
    );
}