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>
            ))}
        </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() {
    return (
        <div id="body">
            <Team/>
            <Tactic/>
        </div>
    )
}

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

export function Tactic() {
    return (
        <div id="tactic">
            <div id="titreTactic">
                <h2>Mes stratégies</h2>
                <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
            </div>
        </div>
    )
}