import { Stack, useTheme } from '@mui/material';
import { composeSx } from '@utils/components';

import { type DrawerDoubleLayoutProps } from '../types';

/**
 * Drawer.DoubleLayout - Two-column layout for side-by-side content
 */
export function DrawerDoubleLayout({
  primaryContent,
  secondaryContent,
  slotProps,
}: DrawerDoubleLayoutProps) {
  const theme = useTheme();
  const newPalette = theme.palette?.new;

  return (
    <Stack
      {...slotProps?.layout}
      sx={composeSx(
        {
          flexDirection: 'row',
          flexGrow: 1,
          overflow: 'hidden',
        },
        slotProps?.layout?.sx,
      )}
    >
      <Stack
        {...slotProps?.primaryContent}
        sx={composeSx(
          {
            p: 3,
            overflowY: 'scroll',
            width: '50%',
          },
          slotProps?.primaryContent?.sx,
        )}
      >
        {primaryContent}
      </Stack>
      <Stack
        {...slotProps?.secondaryContent}
        sx={composeSx(
          {
            p: 3,
            overflowY: 'scroll',
            width: '50%',
            bgcolor: newPalette?.background.elements.grey,
          },
          slotProps?.secondaryContent?.sx,
        )}
      >
        {secondaryContent}
      </Stack>
    </Stack>
  );
}
