import "../style/home.css"

interface Tactic {
    id : number
    name : string
    creationDate : number
}

export default function Home({
    tactics
} : {
    tactics : Tactic[]
}) {
    console.log(tactics);
    return (
        <div id="main">
            <Title/>
            {tactics.map(tactic => (
                <div>{tactic.name}</div>
            ))}
            <Body tactics={tactics}/>
        </div>
    )
}

export function Title() {
    return (
        <div id="header">
            <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
            <img src=""></img>
        </div>
    )
}



export function Body({tactics} : {tactics : Tactic[]}) {
    return (
        <div id="body">
            <Team/>
            <Tactic tactics={tactics}/>
        </div>
    )
}

export function Team() {
    return (
        <div id="team">
            <h2>Mes équipes</h2>
            <button id="createTeam">+</button>
        </div>
    )
}

export function Tactic({tactics} : { tactics : Tactic[]}) {
    const listTactic = tactics.map(tactic => 
        <li
            key = {tactic.id}
        > 
        {tactic.name} : {tactic.creationDate}
        </li>
        );
    return (
        <div id="tactic">
            <div id="titreTactic">
                <h2>Mes stratégies</h2>
                <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
                <ul>
                    {listTactic}
                </ul>

            </div>
        </div>
    )
}