import React, { useState } from 'react'; import { useTheme } from 'Theme'; import { industryData } from 'ComparisonData'; const RatingResults = ({ averageRating, totalReviews, ratings, platform }) => { const theme = useTheme(); // Calculate percentages for the visualization const getPercentage = (count) => { return totalReviews > 0 ? (count / totalReviews) * 100 : 0; }; return (

Results

{averageRating}

{platform === 'google' ? ( <> {'★'.repeat(Math.round(averageRating))} {'☆'.repeat(5 - Math.round(averageRating))} ) : (

{Array.from({ length: 5 }).map((_, i) => (

))}

) }

{/* Lighter text */} {totalReviews} total reviews

Rating Distribution

{[5, 4, 3, 2, 1].map(star => (

{star}

{Math.round(getPercentage(ratings[star]))}%

0 ? 1 : 0, transform: getPercentage(ratings[star]) > 0 ? 'translateY(0)' : 'translateY(5px)', transition: 'opacity 0.5s ease, transform 0.5s ease' }}> {ratings[star]} reviews

))}

Industry Comparison

); }; // Comparison chart component const ComparisonChart = ({ averageRating, platform }) => { const theme = useTheme(); const [selectedIndustry, setSelectedIndustry] = useState('ecommerce'); const industries = Object.keys(industryData); const industryAverage = industryData[selectedIndustry][platform]; // Calculate the difference const difference = (averageRating - industryAverage).toFixed(1); const isPositive = difference > 0; // Max value for the chart (5.0 for ratings) const maxValue = 5.0; return (

{/* Lighter text */} Compare your rating with industry average

{/* Chart visualization */}

{/* Gauge background */}

{/* Tick marks */} {[0, 1, 2, 3, 4, 5].map(tick => (

))} {/* Tick labels */} {[0, 1, 2, 3, 4, 5].map(tick => (

{tick}

))} {/* Industry average marker */}

{/* Industry average label */}

Industry avg: {industryAverage}

{/* Your rating marker */}

{/* Your rating label */}

Your rating: {averageRating}

{/* Comparison insight */}

{isPositive ? '↑' : '↓'}

Your rating is {/* Adjusted colors for dark theme */} {isPositive ? `${difference} higher` : `${Math.abs(difference)} lower`} than the {industryData[selectedIndustry].name} industry average on {platform === 'google' ? 'Google' : 'Trustpilot'}.

); }; export default RatingResults;