import React from 'react'
import '../css/main.css'

export function MainPage() {
    return (<>
        <header>
            <div className="header-left">
                <img src="../img/logo2.png" alt="logo"/>
            </div>
            <div className="header-center">
                <h2>Bienvenue, Prénom Nom</h2>
            </div>
            <div className="header-right">
                <button className="submit-button">Déconnexion</button>
            </div>
        </header>
        <div id="teams-section">
            <div id="team-list-h">
                <h2>Mes équipes</h2>
            </div>
            <div id="teams-list">
                {/*afficher la liste des équipes*/}
                <div class="team-item">
                    <img src="../img/logo2.png"/>
                    <p class="team-name">Equipe 1</p>
                </div>
                <div class="team-item">
                    <img src="../img/logo2.png"/>
                    <p class="team-name">Equipe 2</p>
                </div>
                <div class="team-item">
                    <img src="../img/logo2.png"/>
                    <p class="team-name">Equipe 3</p>
                </div>
                <div class="team-item">
                    <img src="../img/logo2.png"/>
                    <p class="team-name">Equipe 3</p>
                </div>
                <div class="team-item">
                    <img src="../img/logo2.png"/>
                    <p class="team-name">Equipe 3</p>
                </div>
                <div class="team-item">
                    <img src="../img/logo2.png"/>
                    <p class="team-name">Equipe 3</p>
                </div>
            </div>
        </div>

        <div id="schemas-section">
            <h2>Mes schémas</h2>
            <div id="schemas-list">

                {/*<div class="shema-item">*/}
                {/*    <img src="logo.png"/>*/}
                {/*    <p class="shema-name">Shéma 1</p>*/}
                {/*</div>*/}
                {/*<div class="shema-item">*/}
                {/*    <img src="logo2.png"/>*/}
                {/*    <p class="shema-name">Shéma 2</p>*/}
                {/*</div>*/}
                {/*<div class="shema-item">*/}
                {/*    <img src="logo2.png"/>*/}
                {/*    <p class="shema-name">Shéma 3</p>*/}
                {/*</div>*/}

            </div>
        </div>
    </>
)
}