import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { colors, typography, spacing, borderRadius, shadows, iconSizes } from '../theme';

interface QuickActionCardProps {
  icon: string;
  label: string;
  description: string;
  onPress: () => void;
  badge?: string | number;
  color?: string;
}

export const QuickActionCard: React.FC<QuickActionCardProps> = ({
  icon,
  label,
  description,
  onPress,
  badge,
  color = colors.highlight,
}) => {
  return (
    <TouchableOpacity
      style={styles.container}
      onPress={onPress}
      activeOpacity={0.7}
    >
      <View style={styles.content}>
        <View style={[styles.iconContainer, { backgroundColor: `${color}22` }]}>
          <MaterialCommunityIcons name={icon} size={iconSizes.xl} color={color} />
          {badge !== undefined && (
            <View style={styles.badge}>
              <Text style={styles.badgeText}>{badge}</Text>
            </View>
          )}
        </View>
        
        <View style={styles.textContainer}>
          <Text style={styles.label}>{label}</Text>
          <Text style={styles.description}>{description}</Text>
        </View>
      </View>
      
      <MaterialCommunityIcons 
        name="chevron-right" 
        size={iconSizes.md} 
        color={colors.highlight} 
      />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: spacing.lg,
    borderRadius: borderRadius.lg,
    backgroundColor: colors.surfaceAlt,
    borderWidth: 2,
    borderColor: colors.border,
    ...shadows.md,
  },
  content: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.md,
  },
  iconContainer: {
    width: 56,
    height: 56,
    borderRadius: borderRadius.lg,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1.5,
    borderColor: colors.border,
    position: 'relative',
  },
  badge: {
    position: 'absolute',
    top: -6,
    right: -6,
    minWidth: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#EF4444',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 6,
    borderWidth: 2,
    borderColor: colors.surfaceAlt,
  },
  badgeText: {
    ...typography.caption,
    fontSize: 11,
    color: '#FFFFFF',
    fontWeight: '800',
  },
  textContainer: {
    flex: 1,
    gap: 4,
  },
  label: {
    ...typography.h4,
    color: colors.highlightAlt,
  },
  description: {
    ...typography.caption,
    color: colors.textSecondary,
  },
});