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

export function PackageItem({ item, onPress, isSelected }) {
  const { textColorStyle, isDark } = useValues();

  return (
    <View>
      <TouchableOpacity
        activeOpacity={0.7}
        style={[
          styles.container,
          {
            borderColor: isSelected
              ? isDark
                ? appColors.solidBorder
                : appColors.lightGray
              : isDark
              ? appColors.darkBorder
              : appColors.loaderPrimary,
            backgroundColor: isSelected
              ? isDark
                ? appColors.solidBorder
                : appColors.lightGray
              : isDark
              ? appColors.darkPrimary
              : appColors.whiteColor,
          },
        ]}
        onPress={onPress}
      >
        <Text style={[styles.titleText, { color: textColorStyle }]}>
          {item.hour} hr
        </Text>
        <Text style={styles.kmText}>
          {item.distance}
          {item.distance_type}
        </Text>
      </TouchableOpacity>
    </View>
  );
}
