// components/SidebarLayout.tsx
import React from 'react';
import { styled } from '@mui/system';
import { Box, Typography, Button } from '@mui/material';

// Sidebar Container (styled using MUI System)
export const Sidebar = styled('div')(({ theme }) => ({
  width: '240px',
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.common.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: theme.palette.background.paper,
  minHeight: '100vh',
}));

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

// 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>Dashboard</SidebarHeader>
        <SidebarItem>
          <Typography variant="body1">Home</Typography>
        </SidebarItem>
        <SidebarItem>
          <Typography variant="body1">Settings</Typography>
        </SidebarItem>
        <SidebarItem>
          <Typography variant="body1">Profile</Typography>
        </SidebarItem>
        <Button variant="contained" color="secondary" fullWidth>
          Logout
        </Button>
      </Sidebar>

      <MainContent>
        <Typography variant="h4" gutterBottom>
          Welcome to the Dashboard!
        </Typography>
        <Typography variant="body1">
          This is your main content area.
        </Typography>
      </MainContent>
    </LayoutWrapper>
  );
}

export default SidebarLayout;