import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTheme } from '@theme';
import { getStyles } from './actionCard.styles';
import { ActionCardProps } from './actionCard.props';

export const ActionCard: React.FC<ActionCardProps> = ({
  title,
  icon,
  count,
  onAddPress,
  onViewAllPress,
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.card}>
      {/* Header with Icon and Title */}
      <View style={styles.header}>
        <View style={styles.leftSection}>
          <View style={styles.iconContainer}>
            <Icon name={icon} size={22} color={colors.icon} />
          </View>
          <View style={styles.titleSection}>
            <Text style={styles.title}>{title}</Text>
            {count !== undefined && (
              <Text style={styles.count}>
                {count} {count === 1 ? 'item' : 'items'}
              </Text>
            )}
          </View>
        </View>
      </View>

      {/* Action Buttons */}
      <View style={styles.actionsRow}>
        <TouchableOpacity
          style={[styles.actionButton, styles.addButton]}
          onPress={onAddPress}
          activeOpacity={0.7}>
          <Icon name="add-circle-outline" size={18} color="#FFFFFF" />
          <Text style={[styles.actionButtonText, styles.addButtonText]}>
            Add
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.actionButton}
          onPress={onViewAllPress}
          activeOpacity={0.7}>
          <Icon name="eye-outline" size={18} color={colors.icon} />
          <Text style={styles.actionButtonText}>View All</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};