import Head from 'next/head'
import { Timer } from '../components/CountDown/Timer'
import { Footer } from '../components/Footer/Footer'
import { Navbar } from '../components/Navbar/Navbar'
import { Compteur } from '../components/Score/Compteur'
import styles from '../styles/Home.module.css'

export default function Home() {
  const team = ["Rouge", "Bleu", "Vert", "Jaune", "Cyan", "Rouge", "Bleu", "Vert", "Jaune", "Cyan"];
  const score = [0,0,0,0,0,0,0,0,0,0]

  const time = 60;

  return (
    <div>
      <Head>
        <title>Palu-IoT - Laser Game</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Navbar />
      <main className={styles.main}>
        <div className="container bg-dark p-5 text-white bg-opacity-25 border border-5 border-white">
          <div className="row">
            <div className="col-sm py-2 d-flex align-items-center justify-content-center">
              <Timer timeLeft={time} />
            </div>
          </div>
          <div class="row">
            {team.map((x, i) =>
              <div className="col-md py-2 d-flex align-items-center justify-content-center">
                <Compteur score={score[i]} teamName={x} />
              </div>
            )}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
