import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
} from "react-native";
import { Ionicons } from "@expo/vector-icons"; // Import Ionicons untuk icon kembali
import { useNavigation } from "@react-navigation/native";
const transactions = [
  {
    id: 1,
    type: "Penukaran Koin",
    amount: -250,
    date: "2025-04-25 10:30",
    description: "Tukar dengan Tas Belanja",
  },
  {
    id: 2,
    type: "Penukaran Koin",
    amount: -150,
    date: "2025-04-26 14:00",
    description: "Tukar dengan Botol Minum",
  },
  {
    id: 3,
    type: "Penukaran Koin",
    amount: -350,
    date: "2025-04-27 08:15",
    description: "Tukar dengan Peralatan Makan",
  },
];

export default function RiwayatCoinScreen() {
  const navigation = useNavigation();
  return (
    <ScrollView contentContainerStyle={styles.container}>
      {/* Tombol Kembali */}
      <TouchableOpacity
        style={styles.backButton}
        onPress={() => navigation.goBack()} // Kembali ke halaman sebelumnya
      >
        <Ionicons name="arrow-back" size={30} color="#000" />
      </TouchableOpacity>

      {/* Judul */}
      <Text style={styles.title}>RIWAYAT KOIN</Text>

      {/* Kolom Riwayat Transaksi */}
      <View style={styles.historyBox}>
        {transactions.map((transaction) => (
          <View key={transaction.id} style={styles.transactionView}>
            <View style={styles.transactionContent}>
              {/* Deskripsi Transaksi */}
              <View style={styles.leftColumn}>
                <Text style={styles.transactionType}>{transaction.type}</Text>
                <Text style={styles.transactionDescription}>
                  {transaction.description}
                </Text>
                <Text style={styles.transactionDate}>{transaction.date}</Text>
              </View>

              {/* Jumlah Koin */}
              <View style={styles.rightColumn}>
                <Text style={styles.transactionAmount}>
                  {transaction.amount} Koin
                </Text>
              </View>
            </View>
          </View>
        ))}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    flex: 1,
    backgroundColor: "#fff",
  },
  backButton: {
    position: "absolute",
    top: 20,
    left: 10,
    zIndex: 1,
    marginTop: 30,
    // Menempatkan tombol di atas komponen lainnya
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#000",
    marginBottom: 5,
    textAlign: "center",
    marginRight: 200,
    marginTop: 30,
  },
  historyBox: {
    marginTop: 10,
    paddingBottom: 5,
  },
  transactionView: {
    backgroundColor: "#fff", // Warna latar belakang kotak
    borderRadius: 20,
    marginVertical: 10,
    padding: 15,
    flexDirection: "row", // Menyusun elemen secara horizontal
    justifyContent: "space-between", // Membuat kedua kolom terpisah
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#000",
  },
  transactionContent: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
  },
  leftColumn: {
    flex: 1,
  },
  rightColumn: {
    alignItems: "flex-end", // Memposisikan kanan
    flexDirection: "column",
    justifyContent: "center",
  },
  transactionType: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#333",
  },
  transactionDescription: {
    fontSize: 14,
    color: "#555",
    marginBottom: 5,
  },
  transactionDate: {
    fontSize: 12,
    color: "#888",
  },
  transactionAmount: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#4F772D", // Warna merah untuk pengurangan koin
  },
});