import { StyleSheet } from 'react-native';

export const getStyles = (theme: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#F6F7FB',
    },

    balanceCard: {
      margin: 16,
      borderRadius: 18,
      padding: 20,
      backgroundColor: '#2F80ED',
    },

    balanceLabel: {
      color: '#E6F0FF',
      fontSize: 15,
    },

    balance: {
      fontSize: 34,
      fontWeight: '700',
      color: '#FFF',
      marginTop: 8,
    },

    addMoneyButton: {
      marginTop: 20,
      backgroundColor: '#FFF',
      height: 48,
      borderRadius: 12,
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'row',
    },

    addMoneyText: {
      color: '#2F80ED',
      fontWeight: '700',
      fontSize: 16,
      marginLeft: 6,
    },

    sectionTitle: {
      fontSize: 18,
      fontWeight: '700',
      marginHorizontal: 16,
      marginBottom: 10,
      color: '#222',
    },

    listContainer: {
      paddingHorizontal: 16,
      paddingBottom: 20,
    },

    transactionCard: {
      backgroundColor: '#FFF',
      borderRadius: 14,
      padding: 15,
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 12,
      elevation: 2,
      shadowOpacity: 0.08,
      shadowRadius: 5,
      shadowOffset: { width: 0, height: 2 },
    },

    iconContainer: {
      width: 48,
      height: 48,
      borderRadius: 24,
      justifyContent: 'center',
      alignItems: 'center',
    },

    transactionInfo: {
      flex: 1,
      marginLeft: 14,
    },

    transactionTitle: {
      fontWeight: '700',
      fontSize: 15,
      color: '#222',
    },

    transactionRef: {
      color: '#777',
      fontSize: 12,
      marginTop: 2,
    },

    transactionDate: {
      color: '#999',
      fontSize: 12,
      marginTop: 4,
    },

    amountContainer: {
      alignItems: 'flex-end',
    },

    amount: {
      fontWeight: '700',
      fontSize: 16,
    },

    balanceText: {
      color: '#888',
      fontSize: 12,
      marginTop: 4,
    },

    emptyContainer: {
      alignItems: 'center',
      marginTop: 80,
    },

    emptyText: {
      marginTop: 12,
      color: '#888',
      fontSize: 16,
    },
  });