import { IconCircleCheck } from '@material-hu/icons/tabler';
import Stack, { type StackProps } from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import StarsCover from './StarsCover';

type SuccessCoverProps = StackProps;

const SuccessCover = ({ ...stackProps }: SuccessCoverProps) => {
  const { palette } = useTheme();

  return (
    <Stack
      {...stackProps}
      sx={{
        position: 'relative',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <StarsCover
        strongColor={palette.new.icon.feedback.success}
        lightColor={palette.new.border.states.success}
      />
      <IconCircleCheck
        size={90}
        color={palette.new.icon.feedback.success}
        style={{
          position: 'absolute',
          top: 80,
          marginLeft: -5,
        }}
      />
    </Stack>
  );
};

export default SuccessCover;