import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { colors, radius, spacing, typography } from '../../../theme';
import { ExpenseStatItem } from '../types/expenses.types';
import { clampPercent, formatMoney } from '../utils/expenses.formatters';

type ExpenseStatCardProps = {
  item: ExpenseStatItem;
};

const ExpenseStatCard = ({ item }: ExpenseStatCardProps) => {
  const percent = clampPercent(item.percent);

  return (
    <View style={styles.card}>
      <Text style={styles.label}>{item.label}</Text>
      <Text style={styles.amount}>{formatMoney(item.gain)}</Text>

      <View style={styles.progressTrack}>
        <View style={[styles.progressFill, { width: `${percent}%` }]} />
      </View>

      <Text style={styles.percent}>{percent}%</Text>
    </View>
  );
};

export default ExpenseStatCard;

const styles = StyleSheet.create({
  card: {
    width: '48%',
    backgroundColor: colors.white,
    borderRadius: radius.lg,
    padding: spacing.md,
    marginBottom: spacing.md,
    borderWidth: 1,
    borderColor: colors.gray200,
  },
  label: {
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
    fontWeight: typography.fontWeight.semibold,
  },
  amount: {
    marginTop: spacing.xs,
    fontSize: typography.fontSize.md,
    color: colors.textPrimary,
    fontWeight: typography.fontWeight.bold,
  },
  progressTrack: {
    height: 7,
    backgroundColor: colors.gray200,
    borderRadius: 999,
    marginTop: spacing.sm,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    backgroundColor: colors.success || '#6FBF73',
    borderRadius: 999,
  },
  percent: {
    marginTop: spacing.xs,
    textAlign: 'right',
    fontSize: typography.fontSize.xs,
    color: colors.textMuted,
  },
});