import { LoadingButton } from '@mui/lab';
import { Stack, useTheme } from '@mui/material';

import { type DrawerActionsProps, DrawerSize } from '../types';

/**
 * Drawer.Actions - Action buttons section
 */
export function DrawerActions({
  size,
  primaryButtonProps,
  secondaryButtonProps,
  children,
}: DrawerActionsProps) {
  const theme = useTheme();
  const newPalette = theme.palette?.new;

  const buttonFullWidth =
    size === DrawerSize.SMALL || size === DrawerSize.MEDIUM;

  return (
    <Stack
      sx={{
        boxSizing: 'border-box',
        borderTop: `1px solid ${newPalette?.border.neutral.divider}`,
        alignSelf: 'stretch',
        '> *': {
          boxSizing: 'inherit',
        },
      }}
    >
      {children || (
        <Stack
          sx={{
            gap: 1,
            px: 3,
            py: 2,
            flexDirection: { xs: 'column-reverse', sm: 'row' },
            justifyContent: 'flex-end',
            maxWidth: theme => theme.breakpoints.values.lg,
            flex: 1,
            alignSelf: 'stretch',
            width: '100%',
          }}
        >
          {!!secondaryButtonProps && (
            <LoadingButton
              variant="tertiary"
              size="large"
              fullWidth={buttonFullWidth}
              {...secondaryButtonProps}
            />
          )}
          {!!primaryButtonProps && (
            <LoadingButton
              variant="primary"
              size="large"
              fullWidth={buttonFullWidth}
              {...primaryButtonProps}
            />
          )}
        </Stack>
      )}
    </Stack>
  );
}
