"use client"
import React from "react"
import {
  Box,
  Card,
  Container,
  List,
  ListItemButton,
  ListItemText,
  Stack,
  Typography,
} from "@mui/material";
import { useRouter } from "next/navigation";
import { paths } from "@/paths";
import Typewriter from "@/components/Typewriter/Typewriter";

const navItems = [
  { label: "Visions Of Reality", path: paths.games.vor },
  { label: "Tix-Tax", path: paths.games.tixtax },
];

export default function VisionsOfReality() {
  const router = useRouter();
  return (
    <Box
      sx={{
        minHeight: "100vh",
        position: "relative",
        overflow: "hidden",
      }}
    >

      <Stack spacing={2}>
        <Box>
          
          <Typography variant="h5" fontWeight={700}>
            Some online games available to you.
          </Typography>
          <Typography variant="body2" sx={{ opacity: 0.85 }}>
            Choose a one to continue.
          </Typography>
        </Box>

        <List
          disablePadding
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: 1,
          }}
        >
          {navItems.map((item) => (
            <ListItemButton
              key={item.path}
              onClick={() => router.push(item.path)}
              sx={{
                borderRadius: 2,
                border: "1px solid rgba(255,255,255,0.16)",
                backgroundColor: "rgba(0,0,0,0.18)",
                transition: "transform 120ms ease, background-color 120ms ease",
                "&:hover": {
                  backgroundColor: "rgba(255,255,255,0.12)",
                  transform: "translateX(-4px)",
                },
                "&:active": {
                  transform: "translateX(-2px) scale(0.99)",
                },
              }}
            >
              <ListItemText
                primary={item.label}
                primaryTypographyProps={{
                  fontWeight: 600,
                }}
              />
            </ListItemButton>
          ))}
        </List>
      </Stack>
    </Box>
  )
}
