import React from 'react';
import { View, Text, Button, Modal, StyleSheet } from 'react-native';

const ProductModal = ({ visible, product, onClose, onAddToCart }) => (
  <Modal visible={visible} transparent animationType="slide">
    <View style={styles.modalContainer}>
      <View style={styles.modalContent}>
        <Text style={styles.productName}>{product.name}</Text>
        <Text style={styles.productDescription}>{product.description}</Text>
        <Text style={styles.productPrice}>Price: ${product.price}</Text>
        <View style={styles.buttonContainer}>
          <Button title="Add to Cart" onPress={onAddToCart} />
          <Button title="Cancel" onPress={onClose} />
        </View>
      </View>
    </View>
  </Modal>
);

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    width: 300,
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 8,
    alignItems: 'center',
  },
  productName: { fontSize: 20, fontWeight: 'bold' },
  productDescription: { fontSize: 16, marginVertical: 10 },
  productPrice: { fontSize: 18, color: '#333' },
  buttonContainer: { flexDirection: 'row', marginTop: 15 },
});

export default ProductModal;