import { FC, ReactNode } from 'react';

import Stack from '@material-hu/mui/Stack';

import { GROUP_MANAGEMENT_MAX_CONTENT_WIDTH } from 'src/pages/dashboard/groups/constants';

export type FixedActionFooterProps = {
  actions: ReactNode;
  left?: number;
};

export const FixedActionFooter: FC<FixedActionFooterProps> = ({
  actions,
  left = 0,
}) => {
  return (
    <Stack
      sx={{
        position: 'fixed',
        bottom: 0,
        left: left,
        right: 0,
        zIndex: 1,
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        alignItems: 'center',
        justifyContent: 'center',
        py: 2,
        px: 3,
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 0,
          justifyContent: 'space-between',
          width: '100%',
          maxWidth: `${GROUP_MANAGEMENT_MAX_CONTENT_WIDTH}px`,
        }}
      >
        {actions}
      </Stack>
    </Stack>
  );
};