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

export const AddItemButton: React.FC<AddItemButtonProps> = ({
  label = 'Add Item',
  onPress,
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  return (
    <TouchableOpacity style={styles.container} onPress={onPress}>
      <Icon name="add-circle-outline" size={20} color="#3B82F6" />
      <Text style={styles.label}>{label}</Text>
    </TouchableOpacity>
  );
};