import { type FC } from 'react';

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

import Button from '@material-hu/components/design-system/Buttons/Button';

type Props = {
  onAction: () => void;
  label: string;
  loading?: boolean;
  disabled?: boolean;
};

const StepFooter: FC<Props> = ({ onAction, label, loading, disabled }) => (
  <Stack
    sx={{
      backgroundColor: ({ palette }) => palette.new.background.layout.tertiary,
      boxShadow: ({ shadows }) => shadows[1],
      py: 2.5,
    }}
  >
    <Container
      maxWidth="lg"
      sx={{ display: 'flex', justifyContent: 'flex-end' }}
    >
      <Button
        variant="primary"
        size="large"
        onClick={onAction}
        loading={loading}
        disabled={disabled}
      >
        {label}
      </Button>
    </Container>
  </Stack>
);

export default StepFooter;