import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useFeedbackStore } from '../../stores/feedback.store';

interface Props {
  storeId: string;
  itemId: string;
  onSuccess?: () => void;
}

export function ConfirmItemButton({ storeId, itemId, onSuccess }: Props) {
  const { confirmItem, isLoading } = useFeedbackStore();

  const handleConfirm = async () => {
    try {
      await confirmItem(storeId, itemId);
      onSuccess?.();
    } catch {
      // Error is handled in store
    }
  };

  return (
    <TouchableOpacity
      style={styles.button}
      onPress={handleConfirm}
      disabled={isLoading}
    >
      {isLoading ? (
        <ActivityIndicator color="#28a745" size="small" />
      ) : (
        <>
          <Ionicons name="checkmark-circle" size={20} color="#28a745" />
          <Text style={styles.text}>Confirmar</Text>
        </>
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#e8f5e9',
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 8,
    gap: 8,
  },
  text: {
    color: '#28a745',
    fontWeight: '600',
    fontSize: 14,
  },
});