"use client";

import React from "react";
import DashboardIcon from "@mui/icons-material/Dashboard";
import { styled } from "@mui/system";
import { SIDEBAR_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
import PageLinks from "../../../components/PageLinks/PageLinks";

const SideBarContainer = styled("aside")(({ theme }) => ({
  position: "fixed",
  top: 0,
  left: 0,
  width: 240,
  height: "100vh",
  backgroundColor: theme.palette.background.primary,
  color: theme.palette.text.primary,
  display: "flex",
  flexDirection: "column",
  padding: theme.spacing(2),
  zIndex: 1100,
  borderRight: `1px solid ${theme.palette.divider}`,
}));

const SidebarHeader = styled("div")(({ theme }) => ({
  fontSize: "20px",
  fontWeight: 600,
  marginBottom: theme.spacing(3),
  display: "flex",
  alignItems: "center",
  color: theme.palette.text.primary,
}));

const IconSpacing = styled(DashboardIcon)(({ theme }) => ({
  marginLeft: theme.spacing(1),
}));

const SideBar = () => {
  return (
    <SideBarContainer>
      <SidebarHeader>
        <span style={{ color: "#fff" }}>
          Betrise cashir <IconSpacing fontSize="small" />
        </span>
      </SidebarHeader>
      {SIDEBAR_LINKS.map((link) => (
        <PageLinks
          key={link.path}
          title={link.title}
          path={link.path}
          icon={link.icon}
        />
      ))}
    </SideBarContainer>
  );
};

export default SideBar;