'use client';

import React from 'react';
import DashboardIcon from '@mui/icons-material/Dashboard';
import { styled } from '@mui/system';
import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
import SidebarLink from './SideBarLink';

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>
        PaymentIQ <IconSpacing fontSize="small" />
      </SidebarHeader>
       {SIDEBAR_LINKS.map((link) => (
          <SidebarLink
            key={link.path}
            title={link.title}
            path={link.path}
            icon={link.icon}
          />
        ))}
    </SidebarContainer>
  );
};

export default Sidebar;