import * as React from 'react'
import PJCreationMenu from '@lastres/components/pj-creation-menu'

export interface PJSelectionMenuProps {
    setSelectedPJ: (set: string | null) => void
    setUserWantsToCreatePJ: (set: boolean) => void
    userWantsToCreatePJ: boolean
    error: string | null
    setError: (set: string | null) => void
}

export default function PJSelectionMenu (props: PJSelectionMenuProps): JSX.Element {
    const createPJ = (): void => {
        props.setUserWantsToCreatePJ(true)
    }
    if (props.userWantsToCreatePJ) {
        return (
            <PJCreationMenu
                setSelectedPJ={props.setSelectedPJ}
                setUserWantsToCreatePJ={props.setUserWantsToCreatePJ}
                error={props.error}
                setError={props.setError}/>
        )
    }
    return (
        <div className="pj-selection-menu">
            <div className="pj-selection-menu-container">
                <h1>L3TDE</h1>
                <h2>Selecciona un Personaje</h2>
                <div className="pj-list">
                    <a onClick={createPJ} href="#">Crear un nuevo personaje</a>
                </div>
            </div>
        </div>
    )
}