import '../style/teamPanel.css'

interface TeamInfo{
    id: number
    name: string
    picture: string
    mainColor: string
    secondColor: string
}

interface Team {
    info: TeamInfo
    members: Member[]
}

interface Member{
    id: number
    name: string
    mail: string
    profilePicture: string
    role: string
}


export default function TeamPanel({isCoach, team}: {isCoach: boolean, team: Team }){
    return (
        <div>
            <div>
                <TeamDisplay team={team.info}/>
            </div>
            <div>
                {isCoach ? () : ()}
            </div>
            <div>
                <h2>Membres :</h2>

            </div>
        </div>
)
}

function TeamDisplay({ team}: {team : TeamInfo}) {
    return (
        <div>
            <div>
                <h1>{team.name}</h1>
                <img src={team.picture} alt="Logo d'équipe" />
            </div>
            <div id="colors">
                <Color color={team.mainColor}/>
                <Color color={team.secondColor}/>
            </div>
        </div>
    )
}

function Color({color}: {color : string}){
    return(
        <div className="color"><p>Couleur principale : </p>
            <div className="square" style={{backgroundColor: color}}></div>
        </div>
    )
}

function CoachOptions (){

    return (
        <div>
            <button id="delete" onClick={confirm('Êtes-vous sûr de supprimer cette équipe?') ? window.location.href = '' : {}}>Supprimer</button>

        </div>
    )
}

function MemberDisplay({member}: {member : Member}){
    return (
        <div>
            <img src={member.profilePicture} alt="Photo de profile"/>
            <p>{member.name}</p>
            <p>{member.role}</p>
            <p>{member.mail}</p>
        </div>
    )
}