import { Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'



interface PriceProps{
  price: string;
  currency: string;
}

interface PaymentProps{
  price: PriceProps;
  buttonPressHandler: any;
  buttonTitle: string;
}


const PaymentFooter: React.FC<PaymentProps> = ({
  price,
  buttonPressHandler,
  buttonTitle,
}) => {


  return (
    <View style={{padding: 10, marginHorizontal: 10, marginVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
      <View style={{flex: 1, marginHorizontal: 10}}>
        <Text style={{color: 'gray', marginBottom: 3}}>Price</Text>
        <Text style={{fontSize: 22, color: '#EF5A6F', fontWeight: 500}}>{price.currency}{price.price}</Text>
      </View>
      <View style={{flex: 2, backgroundColor: '#DA7297', padding: 15, alignItems: 'center', borderRadius: 5}}>
        <Pressable onPress={() => buttonPressHandler()}>
          <Text style={{color: 'white', fontSize: 16, fontWeight: 500}}>{buttonTitle}</Text>
        </Pressable>
      </View>
    </View>
  )
}

export default PaymentFooter

const styles = StyleSheet.create({})