import { View, Text, TouchableOpacity } from "react-native";
import React from "react";
import styles from "../../styles";
import { useValues } from "@src/utils/context/index";
import { useSelector } from "react-redux";
import { appColors } from "@src/themes";

export function TotalFare({ handlePress, fareAmount, rideStatus }) {
  const { viewRTLStyle, textColorStyle, isDark } = useValues();
  const { translateData } = useSelector((state) => state.setting);
  const { zoneValue } = useSelector((state: any) => state.zone);

  return (
    <View style={[styles.topView, { flexDirection: viewRTLStyle }]}>
      <View style={[styles.fareView, { flexDirection: viewRTLStyle }]}>
        <Text style={[styles.total, { color: appColors.iconColor }]}>
          {translateData.totalFare}
        </Text>
        <Text style={styles.amount}>
          {zoneValue.currency_symbol}
          {fareAmount}
        </Text>
      </View>
      {rideStatus === "completed" && (
        <TouchableOpacity
          style={[
            styles.btnRetry,
            {
              backgroundColor: isDark
                ? appColors.whiteColor
                : appColors.blackColor,
            },
          ]}
          onPress={handlePress}
          activeOpacity={0.7}
        >
          <Text
            style={[
              styles.retry,
              { color: isDark ? appColors.blackColor : appColors.whiteColor },
            ]}
          >
            {translateData.payNow}
          </Text>
        </TouchableOpacity>
      )}
    </View>
  );
}
