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}</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>
    )
}