import cn from 'classnames';
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import Modal from 'react-native-modal';

import Button from '../Button/Button';

type props = {
  title: string;
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
  children: React.ReactNode;
  buttons?: React.ReactNode;
  classNames?: string;
};

const CustomModal: FC<props> = ({
  title,
  isVisible,
  setIsVisible,
  children,
  buttons,
  classNames,
}) => {
  return (
    <Modal
      className="py-3 pt-6"
      isVisible={isVisible}
      onBackdropPress={() => setIsVisible(!isVisible)}
      animationInTiming={1}
      animationOutTiming={1}
    >
      <View
        className={cn(classNames, 'flex justify-center divide-gray-500 rounded-xs bg-white p-5')}
      >
        <Text className="mb-4 text-lg font-bold">{title}</Text>
        {children}
        <View className="mt-3 flex-row justify-end">
          {buttons ? (
            buttons
          ) : (
            <Button classNames="py-1 pl-5" variant="text" onPress={() => setIsVisible(!isVisible)}>
              Zrušit
            </Button>
          )}
        </View>
      </View>
    </Modal>
  );
};

export default CustomModal;
