import {Box, Button, Dialog, DialogProps, Link, Stack, Typography} from '@mui/material'
import React from 'react'
import {getCDNUrl} from '../../helpers/cdn'

interface StarCoinModalProps extends DialogProps {
  starCoin: number
}

const StarCoinModal = ({starCoin, ...props}: StarCoinModalProps): JSX.Element => {

  return (
    <Dialog
      keepMounted
      maxWidth='xs'
      fullWidth={true}
      {...props}
      transitionDuration={300}
    >
      <Box sx={{p: 6}}>
        <Stack alignItems={'center'} direction={'column'}>
          <img src={getCDNUrl('app.star.png')} alt="star-coin" width={88} height={88} />
          <Typography variant={'h4'} my={4}>
            {starCoin}
          </Typography>
          <Link
            href={
              'https://shop111293333.m.youzan.com/wscgoods/detail/36an1234s86fx6a?scan=1&activity=none&from=kdt&qr=directgoods_2157408051&shopAutoEnter=1'
            }
            component={Button}
            target={'_blank'}
            sx={{color: '#fff'}}
          >
            立即充值
          </Link>
        </Stack>
      </Box>
    </Dialog>
  )
}

export default StarCoinModal