path: root/src/screens/Cart/CartScreen.js

import React, { useContext } from 'react';
import { View, Text, Button, StyleSheet, ScrollView } from 'react-native';
import { CartContext } from '../../context/CartContext';

const CartScreen = ({ navigation }) => {
  const { cart, updateQuantity } = useContext(CartContext);

  const handleCheckout = () => navigation.navigate('Checkout');

  return (
    <ScrollView contentContainerStyle={styles.container}>
      {cart.map((item, index) => (
        <View key={index} style={styles.itemContainer}>
          <Text style={styles.itemText}>{item.name}</Text>
          <Text style={styles.quantityText}>Quantity: {item.quantity}</Text>
          <Button 
            title="Increase Quantity" 
            onPress={() => updateQuantity(item.id, item.quantity + 1)} 
          />
        </View>
      ))}
      <View style={styles.checkoutButton}>
        <Button title="Proceed to Checkout" onPress={handleCheckout} />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#f8f9fa',
  },
  itemContainer: {
    backgroundColor: '#ffffff',
    padding: 16,
    borderRadius: 8,
    marginBottom: 12,
    elevation: 2, // for subtle shadow on Android
    shadowColor: '#000', // for iOS shadow
    shadowOpacity: 0.2,
    shadowRadius: 3,
    shadowOffset: { width: 1, height: 2 },
  },
  itemText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 4,
  },
  quantityText: {
    fontSize: 16,
    color: '#666',
    marginBottom: 8,
  },
  checkoutButton: {
    marginTop: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
});

export default CartScreen;