import { A, type RouteSectionProps } from '@solidjs/router'
import type { Component } from 'solid-js'

import AppBar from '@suid/material/AppBar'
import Box from '@suid/material/Box'
import Container from '@suid/material/Container'
import IconButton from '@suid/material/IconButton'
import Stack from '@suid/material/Stack'
import Toolbar from '@suid/material/Toolbar'
import Typography from '@suid/material/Typography'

import HomeIcon from '@suid/icons-material/Home'
import SportsEsportsIcon from '@suid/icons-material/SportsEsports'
import LeaderboardIcon from '@suid/icons-material/Leaderboard'
import PersonIcon from '@suid/icons-material/Person'

const AppShell: Component<RouteSectionProps> = (props) => {
  return (
    <Box sx={{ minHeight: '100vh', bgcolor: '#0b0e14', color: '#e6e6e6' }}>
      <AppBar position="static" color="transparent" elevation={0}>
        <Toolbar>
          <Typography variant="h6" sx={{ flexGrow: 1, fontWeight: 700 }}>
            Know Foolery
          </Typography>

          <Stack direction="row" spacing={1}>
            <IconButton component={A} href="/" aria-label="Home" color="inherit">
              <HomeIcon />
            </IconButton>
            <IconButton component={A} href="/game" aria-label="Game" color="inherit">
              <SportsEsportsIcon />
            </IconButton>
            <IconButton component={A} href="/leaderboard" aria-label="Leaderboard" color="inherit">
              <LeaderboardIcon />
            </IconButton>
            <IconButton component={A} href="/profile" aria-label="Profile" color="inherit">
              <PersonIcon />
            </IconButton>
          </Stack>
        </Toolbar>
      </AppBar>

      <Container maxWidth="md" sx={{ py: 3 }}>
        {props.children}
      </Container>
    </Box>
  )
}

export default AppShell