import Avatar from '@design-system/Avatar';
import Button, { type ButtonProps } from '@design-system/Buttons/Button';
import Title from '@design-system/Title';
import Stack from '@mui/material/Stack';
import { IconCheck } from '@tabler/icons-react';

export type FormSuccessScreenProps = {
  action: ButtonProps;
  title: string;
  description: string;
};

const FormSuccessScreen = ({
  action,
  title,
  description,
}: FormSuccessScreenProps) => {
  return (
    <Stack sx={{ gap: 3, maxWidth: 'sm', mx: 'auto' }}>
      <Stack sx={{ alignItems: 'center', gap: 2, justifyContent: 'center' }}>
        <Avatar
          size="large"
          Icon={IconCheck}
          color="success"
        />
        <Title
          centered
          title={title}
          description={description}
        />
      </Stack>
      <Button
        variant="primary"
        {...action}
      />
    </Stack>
  );
};

export default FormSuccessScreen;
