import React, {FC} from 'react';
import {Modal} from 'react-native';
import CameraIcon from '@assets/svg/CameraIcon';
import {
  Overlay,
  ModalBody,
  ButtonWrapper,
  AllowButton,
  DontAllowButton,
  Title,
  SubTitle,
} from '@styles/screens/scan';

const Permission: FC<{open: boolean; deny: () => void; allow: () => void}> = ({
  open,
  deny,
  allow,
}) => (
  <Modal animationType="fade" transparent={true} visible={open}>
    <Overlay activeOpacity={1} />
    <ModalBody>
      <CameraIcon />
      <Title>Asli wallet would like to access the camera.</Title>
      <SubTitle>Asli wallet uses the camera to scan the QR codes.</SubTitle>
      <ButtonWrapper>
        <DontAllowButton title="Don't Allow" variant="text" onPress={deny} />
        <AllowButton title="Allow" onPress={allow} />
      </ButtonWrapper>
    </ModalBody>
  </Modal>
);

export default Permission;