import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import ExploreIcon from '@mui/icons-material/Explore';
import GroupIcon from '@mui/icons-material/Group';
import HelpIcon from '@mui/icons-material/Help';
import NotificationsIcon from '@mui/icons-material/Notifications';
import PeopleIcon from '@mui/icons-material/People';
import SettingsIcon from '@mui/icons-material/Settings';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import { Box, Button, Hidden, Stack, Typography } from "@mui/material";
import Link from "next/link";

export default function Dashboard() {
    const loggedIn = false;
    const username = "coolguy123";

    return (
        <Box sx={{ position: 'sticky', top: 0 }}>
            {loggedIn ?
                <Stack spacing={2}>
                    <Link href={`/${username}`}>
                        <Button variant="text" size="large" startIcon={<AccountCircleIcon />} sx={{ borderRadius: "999px" }}>
                            <Hidden lgDown>
                                My Profile
                            </Hidden>
                        </Button>
                    </Link>
                    <Link href="/notifications">
                        <Button variant="text" size="large" startIcon={<NotificationsIcon />} sx={{ borderRadius: "999px" }}>
                            <Hidden lgDown>
                                Notifications
                            </Hidden>
                        </Button>
                    </Link>
                    <Link href="/friends">
                        <Button variant="text" size="large" startIcon={<PeopleIcon />} sx={{ borderRadius: "999px" }}>
                            <Hidden lgDown>
                                Friends
                            </Hidden>
                        </Button>
                    </Link>
                    <Link href="/games">
                        <Button variant="text" size="large" startIcon={<SportsEsportsIcon />} sx={{ borderRadius: "999px" }}>
                            <Hidden lgDown>
                                Games
                            </Hidden>
                        </Button>
                    </Link>
                    <Link href="/communities">
                        <Button variant="text" size="large" startIcon={<GroupIcon />} sx={{ borderRadius: "999px" }}>
                            <Hidden lgDown>
                                Communities
                            </Hidden>
                        </Button>
                    </Link>
                    <Link href="/blogs">
                        <Button variant="text" size="large" startIcon={<ExploreIcon />} sx={{ borderRadius: "999px" }}>
                            <Hidden lgDown>
                                Explore
                            </Hidden>
                        </Button>
                    </Link>

                    <Box height={30} />

                    <Link href="/settings">
                        <Button variant="text" size="large" startIcon={<SettingsIcon />} sx={{ borderRadius: "999px" }}>
                            <Hidden lgDown>
                                Settings
                            </Hidden>
                        </Button>
                    </Link>
                    <Link href="/blogs">
                        <Button variant="text" size="large" startIcon={<HelpIcon />} sx={{ borderRadius: "999px" }}>
                            <Hidden lgDown>
                                Help
                            </Hidden>
                        </Button>
                    </Link>
                </Stack>
                :
                <Stack spacing={2} sx={{ justifyContent: "center", textAlign: "center" }}>
                    <Link href="/login">
                        <Button variant="contained" size="large" sx={{ borderRadius: "999px" }}>
                            Log In
                        </Button>
                    </Link>
                    <Link href="/signup">
                        <Button variant="outlined" size="large" sx={{ borderRadius: "999px" }}>
                            Sign Up
                        </Button>
                    </Link>
                    <Typography variant="subtitle1">
                        Unlock endless possibilities - register or log in to unleash the full potential of our website.
                    </Typography>
                </Stack>
            }
        </Box>
    )
}