const ViewStockText = () => {
  const { loading, data, error } = useQuery(GET_CART_QUERY);
  const [stockText, setStockText] = useState('');
  
  const getOutOfStockOrLowStockText = useCallback((product) => {
    const { availableStock, quantity, outOfStock } = product;
    const lowStock = availableStock - quantity;
    
    if (outOfStock) {
      return 'Out of stock';
    } else if (lowStock <= 2) {
      return 'Low stock';
    }
  },[]);
  
  return (
    <div>
      {data?.products.map(product => 
      <p>{getOutOfStockOrLowStockText(product)}</p>}
    </div>
  );
}