getting to payment screen. Bug fixes and formatting changes for item detail

frontend/src/components/ItemReviews.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Rental } from "../types";
-import { rentalAPI } from "../services/api";
+import { itemAPI } from "../services/api";
 
 interface ItemReviewsProps {
   itemId: string;
@@ -17,26 +17,11 @@ const ItemReviews: React.FC<ItemReviewsProps> = ({ itemId }) => {
 
   const fetchReviews = async () => {
     try {
-      // Fetch all rentals for this item
-      const response = await rentalAPI.getMyListings();
-      const allRentals: Rental[] = response.data;
-
-      // Filter for completed rentals with reviews for this specific item
-      const itemReviews = allRentals.filter(
-        (rental) =>
-          rental.itemId === itemId &&
-          rental.status === "completed" &&
-          rental.rating &&
-          rental.review
-      );
-
-      setReviews(itemReviews);
-
-      // Calculate average rating
-      if (itemReviews.length > 0) {
-        const sum = itemReviews.reduce((acc, r) => acc + (r.rating || 0), 0);
-        setAverageRating(sum / itemReviews.length);
-      }
+      const response = await itemAPI.getItemReviews(itemId);
+      const { reviews, averageRating } = response.data;
+      
+      setReviews(reviews);
+      setAverageRating(averageRating);
     } catch (error) {
       console.error("Failed to fetch reviews:", error);
     } finally {