import { type PropsWithChildren } from 'react';

import { SIDEBAR_WIDTH } from '@composed-components/LibrariesSidebar/constants';
import { useSidebarColors } from '@composed-components/LibrariesSidebar/hooks/useGetSidebarColors';
import { type SxProps } from '@mui/material';
import Stack from '@mui/material/Stack';

type SidebarWrapperProps = PropsWithChildren<{ sx?: SxProps }>;

export const SidebarWrapper = ({ children, sx }: SidebarWrapperProps) => {
  const colors = useSidebarColors();

  return (
    <Stack
      sx={{
        backgroundColor: colors.MAIN_WHITE,
        minWidth: SIDEBAR_WIDTH,
        maxWidth: SIDEBAR_WIDTH,
        width: '100%',
        boxSizing: 'border-box',
        alignSelf: 'stretch',
        minHeight: '100%',
        height: '100%',
        borderRight: ({ palette }) =>
          `1.5px solid ${palette.new.border.neutral.divider}`,
        ...sx,
      }}
    >
      {children}
    </Stack>
  );
};
