import { StyleSheet } from 'react-native';
import { typography } from '@theme';

export const getStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background,
    },
    list: {
      padding: 16,
      paddingBottom: 40,
    },
    offerCard: {
      backgroundColor: colors.cardBg,
      borderRadius: 16,
      marginBottom: 16,
      borderWidth: 1,
      borderColor: colors.border,
      overflow: 'hidden',
      elevation: 2,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.05,
      shadowRadius: 8,
    },
    cardHeaderRow: {
      flexDirection: 'row',
      padding: 16,
      alignItems: 'flex-start',
    },
    iconWrap: {
      width: 48,
      height: 48,
      borderRadius: 12,
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 12,
    },
    iconEmoji: {
      fontSize: 22,
    },
    offerInfo: {
      flex: 1,
      paddingRight: 8,
    },
    badgeContainer: {
      alignSelf: 'flex-start',
      paddingHorizontal: 8,
      paddingVertical: 3,
      borderRadius: 6,
      marginBottom: 6,
    },
    badgeText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.bold,
      letterSpacing: 0.4,
      textTransform: 'uppercase',
    },
    offerTitle: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: 4,
      lineHeight: 22,
    },
    offerDescription: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
      lineHeight: 18,
    },
    copyButton: {
      paddingHorizontal: 16,
      paddingVertical: 9,
      borderRadius: 8,
      backgroundColor: colors.primary,
      alignSelf: 'flex-start',
      marginTop: 2,
    },
    copyButtonSuccess: {
      backgroundColor: '#2E7D32',
    },
    copyButtonText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.bold,
      color: '#FFFFFF',
    },
    cardFooter: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      paddingHorizontal: 16,
      paddingBottom: 12,
      paddingTop: 10,
      borderTopWidth: 1,
      borderTopColor: colors.border,
      backgroundColor: colors.inputBg || '#FAFAFA',
    },
    metaChip: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.background,
      paddingHorizontal: 10,
      paddingVertical: 4,
      borderRadius: 12,
      borderWidth: 1,
      borderColor: colors.border,
      marginRight: 8,
      marginBottom: 4,
    },
    metaChipText: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      fontWeight: typography.fontWeight.medium,
    },
    emptyWrap: {
      alignItems: 'center',
      justifyContent: 'center',
      paddingVertical: 60,
      paddingHorizontal: 24,
    },
    emptyIconWrap: {
      width: 80,
      height: 80,
      borderRadius: 40,
      backgroundColor: colors.inputBg || '#F5F5F5',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 16,
    },
    emptyEmoji: {
      fontSize: 36,
    },
    emptyTitle: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: 8,
      textAlign: 'center',
    },
    emptySubtitle: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
      textAlign: 'center',
      lineHeight: 20,
    },
    skeletonCard: {
      height: 110,
      backgroundColor: colors.cardBg,
      borderRadius: 16,
      marginBottom: 16,
      padding: 16,
      borderWidth: 1,
      borderColor: colors.border,
      justifyContent: 'space-between',
    },
    skeletonLineShort: {
      height: 16,
      width: '40%',
      backgroundColor: colors.border,
      borderRadius: 8,
      opacity: 0.5,
    },
    skeletonLineLong: {
      height: 14,
      width: '80%',
      backgroundColor: colors.border,
      borderRadius: 7,
      opacity: 0.5,
    },
    skeletonLineSub: {
      height: 12,
      width: '60%',
      backgroundColor: colors.border,
      borderRadius: 6,
      opacity: 0.5,
    },
  });