import React, { useContext } from "react"
import ReactDOM from "react-dom"
import { Link, Route, Routes, useParams } from "react-router-dom"

import { AppContext } from "../appContext"
import PlayerCharacter from "./PlayerCharacter"

const PlayerListView = () => {
  const params = useParams()
  const { state } = useContext(AppContext)
  const character = params.name ? state.playerCharacters[params.name] : null

  return (<div>
    <nav>
      <Link to="priat">Priat</Link> |
      <Link to="dorian">Dorian </Link> |
      <Link to="ember">Ember</Link> |
      <Link to="lise">Lise</Link>
    </nav>
    {character ? <PlayerCharacter {...character} /> : null }
  </div>);
}

export default PlayerListView