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 <></>
        }
        const image = pj.health > 0 ? pj.image : '/img/skull.png'
        return <><img src={image}/><div className="shadow"/></>
    }
    function printExperience (): JSX.Element {
        if (pj.experience_to_next_level_current === undefined || pj.experience_to_next_level_complete === undefined) {
            return <></>
        }
        return (
            <p>Exp <span style={{ color: 'red' }}>{pj.experience_to_next_level_current}</span>
                /<span style={{ color: 'green' }}>{pj.experience_to_next_level_complete}</span></p>
        )
    }
    return (
        <div className="pj-list-item">
            <div className="avatar">
                {
                    avatar()
                }
            </div>
            <div className="data">
                <p>{pj.nick} Nvl <span style={{ color: 'red' }}>{pj.level}.</span></p>
                {
                    printExperience()
                }
                <label className="bar-container">
                    S <PJHealthLikeBar value={pj.health} max={pj.max_health}/>
                </label>
                <label className="bar-container">
                    M <PJHealthLikeBar value={pj.mana} max={pj.max_mana}/>
                </label>
            </div>
        </div>
    )
}