text: import React from 'react'
  import { View, Text, Image, Button, StyleSheet, ScrollView } from 'react-native'
  import { useSelector } from 'react-redux'
  
  import Colors from '../../constants/Colors'
  
  const ProductDetailScreen = ({ navigation }) => {
    const productId = navigation.getParam('productId')
    const selectedProduct = useSelector((state) =>
      state.products.availableProducts.find((prod) => prod.id === productId),
    )
  
    return (
      <ScrollView>
        <Image style={styles.image} source={{ uri: selectedProduct.imageUrl }} />
        <View style={styles.actions}>
          <Button color={Colors.primary} title="Add To Cart" onPress={() => {}} />
        </View>
        <Text style={styles.price}>${selectedProduct.price.toFixed(2)}</Text>
        <Text style={styles.description}>{selectedProduct.description}</Text>
      </ScrollView>
    )
  }
  
  ProductDetailScreen.navigationOptions = (navData) => {
    return {
      headerTitle: navData.navigation.getParam('productTitle'),
    }
  }
  
  const styles = StyleSheet.create({
    image: {
      width: '100%',
      height: 300,
    },
    actions: {
      marginVertical: 10,
      alignItems: 'center',
    },
    price: {
      fontSize: 'open-sans-bold',
      fontSize: 20,
      color: '#888',
      textAlign: 'center',
      marginVertical: 20,
    },
    description: {
      fontSize: 'open-sans',
      fontSize: 14,
      textAlign: 'center',
      marginHorizontal: 20,
    },
  })
  
  export default ProductDetailScreen
  