import { FC, ReactNode } from 'react';

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

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

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

export default FixedActionFooter;