import { Modal, TouchableOpacity, View } from 'react-native';
import { Button, Icon, Text } from '../components';
import { tw } from '../core';

interface BottomModalProps {
  visible?: boolean;
  children: React.ReactNode;
  title?: string;
  onClose?: () => void;
}

export function BottomModal({ visible, children, title, onClose }: BottomModalProps) {
  return (
    <Modal animationType="fade" transparent={true} visible={visible}>
      <View style={tw`w-full h-full items-center justify-end bg-[#231F20F2]`}>
        <TouchableOpacity style={[tw` w-full h-full rounded-t-[40px] p-5`, { flex: 1 }]} onPress={onClose} />
        <View style={[tw`bg-white w-full rounded-t-[40px] p-5`, { maxHeight: '90%' }]}>
          <View style={tw.style('flex-row items-center justify-between', { 'justify-end': !title })}>
            {title ? (
              <Text containerStyle={tw`self-center`} isHeader leftBorder style={tw`text-black`}>
                {title}
              </Text>
            ) : null}
            {onClose ? (
              <Button
                outlined
                dense
                style={tw`border-0`}
                icon={<Icon name="close" color={tw.color('text-black')} size={20} />}
                onPress={onClose}
              />
            ) : null}
          </View>
          {children}
        </View>
      </View>
    </Modal>
  );
}