import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, Alert } from 'react-native';
import BarcodeScanner from '../components/BarcodeScanner';

const ProductScannerScreen = ({ navigation }) => {
  const [scannedProduct, setScannedProduct] = useState(null);

  const handleScan = (product) => setScannedProduct(product);

  const handleAddToCart = () => {
    navigation.navigate('Cart');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Scan a Product</Text>
      
      <View style={styles.scannerContainer}>
        <BarcodeScanner onScan={handleScan} />
      </View>
      
      {scannedProduct && (
        <View style={styles.productDetails}>
          <Text style={styles.productName}>{scannedProduct.name}</Text>
          <Text style={styles.productPrice}>${scannedProduct.price}</Text>
          <Button title="Add to Cart" onPress={handleAddToCart} />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f8f8f8',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
    color: '#333',
  },
  scannerContainer: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
    borderRadius: 10,
    backgroundColor: '#fff',
  },
  productDetails: {
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#fff',
    borderRadius: 10,
    elevation: 2,
    marginTop: 20,
  },
  productName: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 8,
  },
  productPrice: {
    fontSize: 18,
    color: '#888',
    marginBottom: 16,
  },
});

export default ProductScannerScreen;