import { Box, Divider } from "@mui/material"
import SidebarElement from "./SidebarElement"
import { ArrowBack, Home, Logout, Newspaper, Person, TableChartOutlined, Event } from "@mui/icons-material"

function Sidebar() {

  return (
    <Box sx={{
        width: "250px",
        height: "100vh",
        position: "fixed",
        top: "0",
        left: "0",

        backgroundColor: "#121212",
        boxShadow: "0 0 10px #00000055",
    
        zIndex: 1000,

        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-start",
        alignItems: "center",

        py: "10px",
    }}>
        <img src="/logo.png" alt="logo" style={{
            width: "80%",
            marginBottom: "10px",
        }} />

        <Divider sx={{
            width: "100%",
            height: "1px",

            mb: "5px",
        }} />

        <Box sx={{
            width: "100%",
            height: "100%",

            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            gap: "2px",
        }}>
            <SidebarElement Title="Dashboard" Icon={Home} Path="/admin/dashboard" />
            <SidebarElement Title="Daten import" Icon={TableChartOutlined} Path="/admin/import" />
            <SidebarElement Title="Kalender" Icon={Event} Path="/admin/Kalender" />
            <SidebarElement Title="Benutzer" Icon={Person} Path="/admin/benutzer" />

            <SidebarElement Title="Zur Website" Icon={ArrowBack} Path="/" sx={{
                mt: "auto",
            }} />
            <SidebarElement Title="Logout" Icon={Logout} Path="/admin/logout" />
        </Box>
    </Box>
  )
}

export default Sidebar