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

    role: string
}


export default function TeamPanel({isCoach, team}: {isCoach: boolean, team: Team }){
    return (
        <div>
            <TeamDisplay name={isCoach ? "vrai je suis coach" : "non"}/>
        </div>
)
}

function TeamDisplay({name,picture,mainColor,secondColor}: {name: string,picture : string,mainColor}) {
    return (
        <div>
            <h1>{name}</h1>
            <img src={picture} alt="Logo d'équipe" class="logo"/>
        </div>
        <div id="colors">
            <Color/>
        </div>
    )
}

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