import React from "react";
import { StyleSheet, Text, View } from "react-native";

import { Mono } from "@/components/Mono";
import { StatusPill } from "@/components/StatusPill";
import {
  Transaction,
  formatINRExact,
  timeAgo,
} from "@/constants/mockData";
import { sansMedium, sansSemibold } from "@/constants/typography";
import { useColors } from "@/hooks/useColors";

export function TransactionRow({ tx }: { tx: Transaction }) {
  const colors = useColors();
  return (
    <View
      style={[
        styles.row,
        { backgroundColor: colors.card, borderColor: colors.border },
      ]}
    >
      <View style={{ flex: 1, gap: 4 }}>
        <Text
          numberOfLines={1}
          style={{
            color: colors.text,
            fontFamily: sansSemibold,
            fontSize: 14,
          }}
        >
          {tx.productTitle}
        </Text>
        <View style={styles.metaRow}>
          <Text
            style={{
              color: colors.mutedForeground,
              fontFamily: sansMedium,
              fontSize: 11,
            }}
          >
            {tx.merchant}
          </Text>
          <View
            style={[styles.bullet, { backgroundColor: colors.borderStrong }]}
          />
          <Text
            style={{
              color: colors.mutedForeground,
              fontFamily: sansMedium,
              fontSize: 11,
            }}
          >
            {timeAgo(tx.createdAt)}
          </Text>
        </View>
      </View>
      <View style={{ alignItems: "flex-end", gap: 6 }}>
        <Mono size={14} weight="700" color={colors.text}>
          {formatINRExact(tx.amount)}
        </Mono>
        <StatusPill tone={tx.status} small />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    paddingHorizontal: 14,
    paddingVertical: 12,
    borderRadius: 14,
    borderWidth: 1,
  },
  metaRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  bullet: {
    width: 3,
    height: 3,
    borderRadius: 999,
  },
});