import * as React from 'react'
import type { PJ } from '@lastres/pj'
import PJHealthLikeBar from '@lastres/components/pj-health-like-bar'
export interface PJListItemProps {
    pj: PJ
}
export default function PJListItem (props: PJListItemProps): JSX.Element {
    const pj = props.pj
    function avatar (): React.ReactNode {
        if (pj.image === undefined) {
            return <></>
        }
        return <><img src={pj.image}/><div className="shadow"/></>
    }
    return (
        <div className="pj-list-item">
            <div className="avatar">
                {
                    avatar()
                }
            </div>
            <div className="data">
                <p>{pj.nick} Nivel <span style={{ color: 'red' }}>{pj.level}.</span></p>
                <p>Experiencia: <span style={{ color: 'red' }}>{pj.experience_to_next_level_current}</span>
                    /<span style={{ color: 'green' }}>{pj.experience_to_next_level_complete}</span></p>
                <label className="bar-container">
                    Salud
                    <PJHealthLikeBar value={pj.health} max={pj.max_health}/>
                </label>
                <label className="bar-container">
                    Mana
                    <PJHealthLikeBar value={pj.mana} max={pj.max_mana}/>
                </label>
            </div>
        </div>
    )
}