import { Feather } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { colors, radius, spacing, typography } from '../../../theme';
import { formatMoney } from '../utils/expenses.formatters';

type ExpenseHeroCardProps = {
  total: number;
};

const ExpenseHeroCard = ({ total }: ExpenseHeroCardProps) => {
  return (
    <View style={styles.card}>
      <View style={styles.topRow}>
        <View>
          <Text style={styles.label}>Total de la note de frais</Text>
          <Text style={styles.value}>{formatMoney(total)}</Text>
        </View>

        <View style={styles.iconWrapper}>
          <Feather name="dollar-sign" size={22} color={colors.white} />
        </View>
      </View>

      <View style={styles.footer}>
        <Text style={styles.footerText}>Mis à jour automatiquement</Text>
      </View>
    </View>
  );
};

export default ExpenseHeroCard;

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.primary,
    borderRadius: radius.xl,
    padding: spacing.lg,
    marginBottom: spacing.xl,
  },
  topRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
  },
  label: {
    fontSize: typography.fontSize.sm,
    color: 'rgba(255,255,255,0.8)',
  },
  value: {
    marginTop: spacing.xs,
    fontSize: 30,
    fontWeight: typography.fontWeight.bold,
    color: colors.white,
  },
  iconWrapper: {
    width: 46,
    height: 46,
    borderRadius: 23,
    backgroundColor: 'rgba(255,255,255,0.18)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    marginTop: spacing.md,
  },
  footerText: {
    color: 'rgba(255,255,255,0.75)',
    fontSize: typography.fontSize.xs,
  },
});