'use client'

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

// Sidebar Container (styled using MUI System)
export const Sidebar = styled('div')(({ theme }) => ({
  width: '240px',
  backgroundColor: 'rgb(69, 190, 171)',
  color: 'white',
  padding: theme.spacing(2),
  height: '100vh',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
}));

// Main Content Area
export const MainContent = styled('div')(({ theme }) => ({
  marginLeft: '240px',
  padding: theme.spacing(3),
  backgroundColor: 'green',
  minHeight: '100vh',
}));

// Sidebar Navigation Items
export const SidebarItem = styled('div')(({ theme }) => ({
  padding: theme.spacing(1.5),
  cursor: 'pointer',
  '&:hover': {
    backgroundColor: 'brown',
  },
}));

// Page Wrapper that holds Sidebar and Content
export const LayoutWrapper = styled('div')({
  display: 'flex',
  flexDirection: 'row',
  height: '100vh',
});

// Sidebar Header
export const SidebarHeader = styled('div')(({ theme }) => ({
  marginBottom: theme.spacing(2),
  fontSize: '20px',
  fontWeight: 600,
}));

const SidebarLayout = () => { 
 return (
    <LayoutWrapper>
      <Sidebar>
        <SidebarHeader>PaymentIQ<DashboardIcon sx={{ marginLeft: 0.5 }}/></SidebarHeader>
        {SIDEBAR_LINKS.map((link) => (
          <SidebarLink
            key={link.path}
            title={link.title}
            path={link.path}
            icon={link.icon}
          />
        ))}
      </Sidebar>
    </LayoutWrapper>
  );
}

export default SidebarLayout;