import "../styles/App.scss"
import "../styles/globals.css"
import "../styles/grid2.scss"
import "../styles/grid.scss"
import type { AppProps } from "next/app"
import { Dispatch, SetStateAction, createContext, useState } from "react"
import { ToastContainer } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"

interface gameContext {
  pin?: string
  game?: {
    id: string
  }
  player?: {
    id: string
    username?: string
    isOwner?: boolean
  }
  enemy?: {
    id: string
    username?: string
  }
}

export const gameContext = createContext<
  [gameContext, Dispatch<SetStateAction<gameContext>>]
>([{}, () => {}])

export default function App({ Component, pageProps }: AppProps) {
  const gameProps = useState<gameContext>({})
  return (
    <gameContext.Provider value={gameProps}>
      <Component {...pageProps} />
      <ToastContainer />
    </gameContext.Provider>
  )
}
