import { AppBar, Box, Button, Container, Stack, Toolbar, Typography } from '@mui/material'
import { Link, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export function RootLayout() {
  return (
    <Box sx={{ minHeight: '100vh', background: 'linear-gradient(180deg, #f7f4ee 0%, #efe8dc 100%)' }}>
      <AppBar position="sticky" color="primary" elevation={0}>
        <Toolbar sx={{ gap: 2, flexWrap: 'wrap' }}>
          <Typography variant="h6" sx={{ fontWeight: 700, letterSpacing: 1 }}>
            第七史诗资料馆
          </Typography>
          <Stack direction="row" spacing={1} sx={{ ml: 'auto' }}>
            <Button component={Link} to="/" color="inherit">
              首页
            </Button>
            <Button component={Link} to="/characters" color="inherit">
              角色
            </Button>
            <Button component={Link} to="/artifacts" color="inherit">
              神器
            </Button>
          </Stack>
        </Toolbar>
      </AppBar>

      <Container sx={{ py: 4 }}>
        <Outlet />
      </Container>

      {import.meta.env.DEV ? <TanStackRouterDevtools position="bottom-right" /> : null}
    </Box>
  )
}