'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: theme.palette.background.primary,
  color: 'white',
  padding: theme.spacing(2),
  height: '100vh',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  transition: 'width 0.3s ease', // Transition for resizing
}));

// Main Content Area
export const MainContent = styled('div')(({ theme }) => ({
  flexGrow: 1,
  padding: theme.spacing(4),
  backgroundColor: theme.palette.background.default,
  minHeight: '100vh',
  overflowY: 'auto',
}));

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

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

interface SidebarLayoutProps {
  children: React.ReactNode; // Add children to accept passed content
}

const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {
  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>
      <MainContent>{children}</MainContent> {/* Render children here */}
    </LayoutWrapper>
  );
};

export default SidebarLayout;