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,
    },
    modalOverlay: {
      flex: 1,
      justifyContent: 'flex-end',
    },

    modalBackdrop: {
      ...StyleSheet.absoluteFill,
      backgroundColor: 'rgba(0,0,0,0.4)',
    },

    modalCard: {
      backgroundColor: '#FFF',
      borderTopLeftRadius: 24,
      borderTopRightRadius: 24,
      padding: 24,
      paddingBottom: 32,
    },

    modalTitle: {
      fontSize: 20,
      fontWeight: '700',
      color: '#222',
    },

    modalSubtitle: {
      fontSize: 13,
      color: '#888',
      marginTop: 4,
      marginBottom: 20,
    },

    amountInputWrapper: {
      flexDirection: 'row',
      alignItems: 'center',
      borderWidth: 1,
      borderColor: '#E0E0E0',
      borderRadius: 12,
      paddingHorizontal: 16,
      height: 56,
    },

    rupeeSymbol: {
      fontSize: 22,
      fontWeight: '700',
      color: '#222',
      marginRight: 8,
    },

    amountInput: {
      flex: 1,
      fontSize: 22,
      fontWeight: '700',
      color: '#222',
      padding: 0,
    },

    modalError: {
      color: '#F04438',
      fontSize: 13,
      marginTop: 8,
    },

    topUpButton: {
      marginTop: 24,
      backgroundColor: '#2F80ED',
      height: 52,
      borderRadius: 12,
      justifyContent: 'center',
      alignItems: 'center',
    },

    topUpButtonDisabled: {
      opacity: 0.6,
    },

    topUpButtonText: {
      color: '#FFF',
      fontWeight: '700',
      fontSize: 16,
    },

    modalCancelButton: {
      marginTop: 12,
      height: 48,
      justifyContent: 'center',
      alignItems: 'center',
    },

    modalCancelText: {
      color: '#888',
      fontWeight: '600',
      fontSize: 15,
    },
  });