import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import type { QuantifierProps } from '@packages/shared';
import tw from '../lib/tailwind';
import { colors } from '../lib/theme-colors';

const Quantifier: React.FC<QuantifierProps> = ({
  value,
  setValue,
  step = 1,
  unit,
  min = 0,
  max
}) => {
  
  const unitText = typeof unit === 'object' ? unit?.shortNotation : unit;

  
  return (
    <View style={tw`flex-row items-center bg-white rounded-xl shadow-sm border border-gray-200 p-1`}>
      <TouchableOpacity
        style={tw`w-8 h-8 rounded-lg bg-gray-50 items-center justify-center border border-gray-100 active:bg-gray-100`}
        onPress={() => setValue(Math.max(min, value - step))}
        activeOpacity={0.7}
      >
        <MaterialIcons name="remove" size={18} color={value <= min ? "#D1D5DB" : "#4B5563"} />
      </TouchableOpacity>

      <View style={tw`flex-1 flex-row items-center justify-center px-1`}>
        <Text style={tw`text-center text-gray-900 font-bold text-base`}>
          {value}
        </Text>
        {/* {unitText && (
           //hide unit text for now
          <Text style={tw`text-xs text-gray-400 font-medium ml-0.5 mt-0.5`}>
            {unitText}
          </Text>
        )} */}
      </View>

      <TouchableOpacity
        style={tw`w-8 h-8 rounded-lg bg-brand500 items-center justify-center shadow-sm active:bg-brand600`}
        onPress={() => {
          if (max !== undefined && value + step > max) return;
          setValue(value + step);
        }}
        activeOpacity={0.7}
      >
        <MaterialIcons name="add" size={18} color="#FFFFFF" />
      </TouchableOpacity>
    </View>
  );
};

export default Quantifier;