Review Page

                                        import React from "react";
import {
  View,
  StyleSheet,
  Text,
  SafeAreaView,
  ScrollView,
  StatusBar,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";

export default function Reviews() {
  // Ratings data for summary
  const ratings = [
    { stars: 5, count: 500 },
    { stars: 4, count: 150 },
    { stars: 3, count: 90 },
    { stars: 2, count: 50 },
    { stars: 1, count: 20 },
  ];

  // Dynamically calculate the total number of reviews
  const totalReviews = ratings.reduce((sum, rating) => sum + rating.count, 0);

  // Calculate the average rating
  const totalStars = ratings.reduce(
    (sum, rating) => sum + rating.stars * rating.count,
    0
  );
  const averageRating = (totalStars / totalReviews).toFixed(1); // Rounded to 1 decimal

  // User reviews data
  const userReviews = [
    {
      id: 1,
      name: "John Doe",
      review:
        "This is 💯 one hundred percent the best lip mask duo ever !!! The scent is " +
        "delicious and it’s so smooth from the scrub & mask ~ This is perfection~ " +
        "Smells just like honey 🍯 & the packaging is so adorable ~ I’m so very " +
        "happy with this product 🐻 🍯 ~",
      rating: 5,
      verified: true,
    },
    {
      id: 2,
      name: "Jane Smith",
      review:
        "Good product overall, but the packaging could be improved. The scent is " +
        "nice, and it works well for my skin.",
      rating: 4,
      verified: true,
    },
    {
      id: 3,
      name: "Alice Johnson",
      review:
        "The product is okay, but I expected better results. It’s not bad, but it " +
        "didn’t meet my expectations.",
      rating: 3,
      verified: false,
    },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor="white" barStyle="dark-content" />
      <ScrollView showsVerticalScrollIndicator={false}>
        {/* Ratings Summary Section */}
        <View style={{ marginTop: 5 }}>
          <Text style={styles.topheading}>Ratings & Reviews</Text>
        </View>

        <View style={{ marginTop: 10 }}>
          <Text style={styles.subHeading}>Summary</Text>

          {/* Dynamic Ratings Section */}
          {ratings.map((rating) => {
            const percentage = (rating.count / totalReviews) * 100; // Calculate %
            return (
              <View key={rating.stars} style={styles.reviewRow}>
                {/* Star Rating */}
                <View style={styles.ratingContainer}>
                  <Text style={styles.ratingText}>{rating.stars}</Text>
                </View>

                {/* Progress Bar */}
                <View style={styles.progressBarContainer}>
                  <View style={styles.progressBarBackground}>
                    <View
                      style={[
                        styles.progressBarFill,
                        { width: `${percentage}%` }, // Dynamic width
                      ]}
                    ></View>
                  </View>
                </View>

                {/* Review Count */}
                <View style={styles.reviewCountContainer}>
                  <Text style={styles.reviewCountText}>
                    {rating.count} Reviews
                  </Text>
                </View>
              </View>
            );
          })}
        </View>

        {/* Total Rate Count and Average Rating */}
        <View style={styles.averageRatingContainer}>
          <Text style={styles.averageRatingText}>
            {averageRating}{" "}
            <Ionicons name="star" size={40} color={"orange"} />
          </Text>
          <Text style={styles.totalReviewsText}>
            {totalReviews} Total Reviews
          </Text>
        </View>

        {/* User Reviews Section */}
        <View style={{ marginTop: 30, paddingBottom:20 }}>
          <Text style={styles.subHeading}>User Reviews</Text>
          {userReviews.map((review) => (
            <View key={review.id} style={{ marginTop: 20 }}>
              <View>
                {/* User Info */}
                <View
                  style={{
                    flexDirection: "row",
                    justifyContent: "space-between",
                    alignItems: "center",
                  }}
                >
                  <View style={{ gap: 5 }}>
                    <Text style={{ fontSize: 16 }}>{review.name}</Text>
                    <Text
                      style={{
                        fontSize: 13,
                        color: review.verified ? "green" : "gray",
                      }}
                    >
                      {review.verified ? "Verified Buyer" : "Unverified Buyer"}
                    </Text>
                  </View>

                  {/* Star Rating */}
                  <View style={{ flexDirection: "row", gap: 2 }}>
                    {Array.from({ length: review.rating }).map((_, index) => (
                      <Ionicons
                        key={index}
                        name="star"
                        size={22}
                        color={"orange"}
                      />
                    ))}
                  </View>
                </View>

                {/* User Review Text */}
                <View style={{ marginTop: 15 }}>
                  <Text style={{ fontSize: 15, color: "gray" }}>
                    {review.review}
                  </Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 20,
  },
  topheading: {
    fontSize: 30,
    fontWeight: "600",
  },
  subHeading: {
    fontSize: 20,
    color: "gray",
    marginBottom: 10,
  },
  reviewRow: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 10,
    gap: 5,
  },
  ratingContainer: {
    borderRadius: 20,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10,
  },
  ratingText: {
    fontSize: 16,
    fontWeight: "bold",
    color: "black",
  },
  progressBarContainer: {
    flex: 1,
    marginRight: 10,
  },
  progressBarBackground: {
    backgroundColor: "lightgray",
    height: 10,
    borderRadius: 5,
    overflow: "hidden",
  },
  progressBarFill: {
    backgroundColor: "orange",
    height: "100%",
  },
  reviewCountContainer: {
    justifyContent: "center",
  },
  reviewCountText: {
    fontSize: 14,
    color: "gray",
  },
  averageRatingContainer: {
    marginTop: 30,
    alignItems: "center",
    justifyContent: "center",
  },
  averageRatingText: {
    fontSize: 50,
    color: "black",
  },
  totalReviewsText: {
    fontSize: 18,
    color: "gray",
    marginTop: 5,
  },
});