import Button, { type ButtonProps } from '@design-system/Buttons/Button';
import Stack, { type StackProps } from '@mui/material/Stack';

export type FormFooterProps = {
  nextButton: ButtonProps;
  backButton: ButtonProps;
  sx?: StackProps['sx'];
  slotProps?: {
    nextButton?: ButtonProps;
    backButton?: ButtonProps;
    root?: StackProps;
    wrapper?: StackProps;
  };
};

const FormFooter = ({
  nextButton,
  backButton,
  sx,
  slotProps,
}: FormFooterProps) => {
  return (
    <Stack
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.default,
        bottom: 0,
        position: 'sticky',
        justifyContent: 'center',
        flexDirection: 'row',
        p: 2,
        ...sx,
      }}
      {...slotProps?.root}
    >
      <Stack
        sx={{
          flex: 1,
          mx: 'auto',
          gap: 2,
          px: 3,
          maxWidth: theme => theme.breakpoints.values.lg,
          flexDirection: 'row',
          justifyContent: 'flex-end',
          alignItems: 'center',
          ...slotProps?.wrapper?.sx,
        }}
        {...slotProps?.wrapper}
      >
        <Button
          size="large"
          variant="tertiary"
          {...backButton}
        />
        <Button
          size="large"
          variant="primary"
          {...nextButton}
        />
      </Stack>
    </Stack>
  );
};

export default FormFooter;
