import { Box, Button, Image, Modal,  ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react'
import React from 'react'
import Mobile from "../assets/mobileWing.png"
import mobileBanner from "../assets/welcome.avif"

const MobileView = ({isOpen,onClose,finalRef}) => {
  return (
    <div>
      <Modal  finalFocusRef={finalRef} isOpen={isOpen} onClose={onClose} >
        <ModalOverlay />
        <ModalContent h={"600px"} w={"300px"} backgroundColor={"transparent"} boxShadow={"none"} position={"relative"}>
            <Image  h={"100%"} src={Mobile} position={"absolute"} top={"0"} left={"0"} />
            <Box backgroundColor={"#fff"} h={"100%"} m={2} borderRadius={"30px"} pt={"30px"} px={4}>
                 <Box>
                    <Image borderRadius={"5px"} h={"130px"} w={"100%"} src={mobileBanner} />
                 </Box>
            </Box>
        </ModalContent>
      </Modal>
    </div>
  )
}

export default MobileView