import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import tw from '../lib/tailwind';
import CartIcon from './icons/CartIcon';

interface MiniQuantifierProps {
  value: number;
  onChange: (value: number) => void;
  showUnits?: boolean;
  unit?: string;
  step?: number;
}

const MiniQuantifier: React.FC<MiniQuantifierProps> = ({ value, onChange, showUnits = false, unit, step = 1 }) => (
  <View style={tw`flex-row items-center bg-white rounded-lg shadow-sm border border-gray-200 p-0.5`}>
    <TouchableOpacity
      style={tw`w-5 h-5 rounded-md bg-gray-50 items-center justify-center`}
      onPress={() => onChange(Math.max(0, value - step))}
      activeOpacity={0.7}
    >
      <MaterialIcons name="remove" size={12} color="#4B5563" />
    </TouchableOpacity>
    <View style={tw`px-1 flex-row items-center`}>
      <Text style={tw`text-center text-gray-900 font-bold text-xs`}>{value}</Text>
      {showUnits && unit && (
        <Text style={tw`text-xs text-gray-400 font-medium ml-0.5`}>{unit}</Text>
      )}
    </View>
    <TouchableOpacity
      style={tw`w-5 h-5 rounded-md bg-brand500 items-center justify-center shadow-sm`}
      onPress={() => onChange(value + step)}
      activeOpacity={0.7}
    >
      <MaterialIcons name="add" size={12} color="#FFFFFF" />
    </TouchableOpacity>
  </View>
);

export default MiniQuantifier;