import React from 'react';
import { IModalProps, Modal, Text, Box, ScrollView, HStack, Heading } from 'native-base';
import cn from 'classnames';
import { ErrorIcon } from '../ui';

type ErrorsModalProps = { errors: Array<string> } & Omit<IModalProps, 'animationPreset'>;

const ErrorsModal = ({ errors, isOpen, onClose, ...rest }: ErrorsModalProps) => (
  <Modal isOpen={isOpen} onClose={onClose} animationPreset="slide" size="xl" {...rest}>
    <Modal.Content>
      <Modal.CloseButton />
      <Modal.Header>
        <HStack className="items-center gap-x-2">
          <Heading size="md">Heat pump failures</Heading>
          <ErrorIcon size={18} />
        </HStack>
        <Text className="mt-1 text-xs">Contact technical support</Text>
      </Modal.Header>
      <ScrollView className="mx-3">
        {errors.map((error, i) => (
          <Box
            key={`error-msg-${i}`}
            className={cn('py-3 px-1', i < errors.length - 1 && 'border-b border-gray-300 ')}
          >
            <Text>{error}</Text>
          </Box>
        ))}
      </ScrollView>
    </Modal.Content>
  </Modal>
);

export default ErrorsModal;
