Untitled

import React, { useState } from 'react';
import { Modal, View, Text, TextInput, TouchableOpacity } from 'react-native';

const CallDialerM = ({ visible, onClose }) => {
  const [phoneNumber, setPhoneNumber] = React.useState('');
console.log(visible);
  const handleCall = () => {
    // Implement call functionality here
  };

  const numberButtons = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];

  return (
    <Modal
      animationType="slide"
      transparent={true}

      visible={false}

      onRequestClose={onClose}
    >
      <View className="flex flex-1 justify-end">
        <View className="bg-white p-4 rounded-t-lg">
          <Text className="text-xl font-semibold mb-2">Call Dialer</Text>
          <TextInput
            className="w-full p-2 border border-gray-300 rounded"
            placeholder="Enter phone number"
            value={phoneNumber}
            onChangeText={setPhoneNumber}
          />
          <View className="flex flex-row justify-between">
            {numberButtons.map((number) => (
              <TouchableOpacity
                key={number}
                className="w-1/4 p-2 border border-gray-300 rounded"
                onPress={() => setPhoneNumber(phoneNumber + number)}
              >
                <Text className="text-center text-xl">{number}</Text>
              </TouchableOpacity>
            ))}
          </View>
          <TouchableOpacity className="mt-4 bg-blue-500 p-2 rounded-lg" onPress={handleCall}>
            <Text className="text-white text-center font-semibold">Call</Text>
          </TouchableOpacity>
          <TouchableOpacity className="mt-2 bg-red-500 p-2 rounded-lg" onPress={onClose}>
            <Text className="text-white text-center font-semibold">Cancel</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

export default CallDialerModal;