import { Button, Flex, Modal, SimpleGrid, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { IoIosWarning } from 'react-icons/io';

export default function LayoutModalNew({ opened, onClose, description, onYes, loading, onCheck }: { opened: boolean, onClose: () => void, loading?: boolean, description: string, onYes: (val: boolean) => void, onCheck: (val: boolean) => void }) {
   const isMobile = useMediaQuery('(max-width: 768px)');
   return (
      <Modal styles={{
         body: {
            margin: 10,
         },
         content: {
            border: `2px solid ${'#828AFC'}`,
            borderRadius: 10
         }
      }} opened={opened} onClose={onClose} withCloseButton={false} centered closeOnClickOutside={false}>
         <Flex justify={"center"} align={"center"} direction={"column"}>
            <IoIosWarning size={130} color="red" />
            <Text mt={20} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
         </Flex>
         <Button mt={30} fullWidth size="lg" radius={'xl'} bg={'blue'} onClick={() => onCheck(true)}>Lihat Data</Button>
         <SimpleGrid mt={10} cols={{ base: 1, sm: 2, lg: 2 }}>
            {isMobile ?
               <>
                  <Button loading={loading} fullWidth size="lg" radius={'xl'} bg={'#dcdcdc'} c={'#858e96'} onClick={() => { onYes(true) }}>YA</Button>
                  <Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
               </>
               :
               <>
                  <Button loading={loading} fullWidth size="lg" radius={'xl'} bg={'#dcdcdc'} c={'#858e96'} onClick={() => { onYes(true) }}>YA</Button>
                  <Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
               </>

            }
         </SimpleGrid>
      </Modal>
   );
}

