import { StyleSheet } from 'react-native';
import { ThemeColors } from '../../theme';

export const getStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background,
    },
    // Header
    header: {
      paddingHorizontal: 16,
      paddingTop: 12,
      paddingBottom: 10,
    },
    searchInput: {
      width: '100%',
    },
    // Stat Cards container aligned evenly across screen width
    countsContainer: {
      flexDirection: 'row',
      paddingHorizontal: 16,
      paddingTop: 4,
      paddingBottom: 12,
      gap: 10,
    },
    statCardFlex: {
      flex: 1,
      minWidth: 0,
    },
    // List
    listContent: {
      paddingHorizontal: 16,
      paddingTop: 6,
      paddingBottom: 40,
    },
    // States
    errorContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 32,
    },
    errorText: {
      color: '#EF4444',
      fontSize: 14,
      textAlign: 'center',
    },
    emptyContainer: {
      alignItems: 'center',
      paddingTop: 80,
      padding: 32,
      gap: 10,
    },
    emptyIconWrap: {
      width: 76,
      height: 76,
      borderRadius: 38,
      backgroundColor: colors.surface,
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: 10,
      borderWidth: 1,
      borderColor: colors.border,
      shadowColor: '#5B4CF5',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.10,
      shadowRadius: 10,
      elevation: 3,
    },
    emptyTitle: {
      color: colors.text,
      fontSize: 17,
      fontWeight: '700',
      textAlign: 'center',
      letterSpacing: 0.1,
    },
    emptyText: {
      color: colors.textSecondary,
      fontSize: 13,
      textAlign: 'center',
      lineHeight: 20,
      maxWidth: 280,
    },
  });