import { useRouter } from "expo-router";
import { Text, TouchableOpacity, View } from "react-native";

interface PaymentHistoryCardProps {
  date: string;
  amount: string;
  time: string;
  method: string;
  status: string;
  id: number;
}

export default ({
  id,
  date,
  amount,
  time,
  method,
  status,
}: PaymentHistoryCardProps) => {
  const router = useRouter();

  const handlePress = () => {
    router.push({
      pathname: "/payments/TransactionDetails",
      params: { paymentId: id },
    });
  };

  console.log(status, "payment Status");
  const getStatusStyle = (status: string) => {
    switch (status.toLowerCase()) {
      case "failure":
        return {
          backgroundColor: "#FDE8E7",
          color: "#D51C10",
        };
      case "pending":
        return {
          backgroundColor: "#FFF0E3",
          color: "#8E4400",
        };
      case "confirmed":
        return {
          backgroundColor: "#E8F5E8",
          color: "#2D7D32",
        };
      default:
        return {
          backgroundColor: "#E8F5E8",
          color: "#2D7D32",
        };
    }
  };

  const statusStyle = getStatusStyle(status);

  return (
    <TouchableOpacity style={styles.paymentCard} onPress={handlePress}>
      <View style={styles.paymentCardTop}>
        <Text style={styles.paymentDate}>{date}</Text>
        <Text style={styles.paymentAmount}>{amount}</Text>
      </View>
      <View style={styles.paymentCardBottom}>
        <Text style={styles.paymentDetails}>
          {time} • {method}
        </Text>
        {status && status !== "confirmed" && (
          <View
            style={[
              styles.statusBadge,
              { backgroundColor: statusStyle.backgroundColor },
            ]}
          >
            <Text style={[styles.statusText, { color: statusStyle.color }]}>
              {status.charAt(0).toUpperCase() + status.slice(1)}
            </Text>
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
};

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  paymentCard: {
    height: 76,
    width: "100%",
    backgroundColor: "rgba(252,252,252,1)",
    borderRadius: 8,
    paddingVertical: 12,
    paddingHorizontal: 12,
    flexDirection: "column",
    gap: "12",

    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  paymentCardTop: {
    height: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  paymentDate: {
    width: 231,
    height: 20,
    fontFamily: "Inter-Regular",
    fontSize: 14,
    lineHeight: 20,
    color: "rgba(37,42,52,1)", // #252A34
    textAlign: "left",
  },
  paymentAmount: {
    height: 20,
    fontFamily: "Inter-SemiBold",
    fontSize: 14,
    lineHeight: 20,
    color: "rgba(37,42,52,1)", // #252A34
    textAlign: "right",
    marginLeft: 4, // simulate gap
  },
  paymentCardBottom: {
    height: 20,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  paymentDetails: {
    height: 16,
    fontFamily: "Inter-Regular",
    fontSize: 12,
    lineHeight: 16,
    color: "rgba(86,95,112,1)", // #565F70
    textAlign: "left",
    marginTop: 2, // slight vertical offset from Figma y=2
  },
  statusBadge: {
    height: 20,
    borderRadius: 4,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 8,
    paddingVertical: 2,
  },
  statusText: {
    fontFamily: "Inter-Medium",
    fontSize: 12,
    lineHeight: 16,
    color: "#8E4400",
    textAlign: "center",
  },
});