"use client" import * as React from "react" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { cn } from "@/lib/utils" export interface Review { rating: number reviewer: string roleReviewer: string review: string date: string } export interface ClientReviewsProps extends React.HTMLAttributes { reviews: Review[] } const fillStars = (rating: number) => { const stars = [] const fullStars = Math.floor(rating) const hasHalfStar = rating % 1 >= 0.5 for (let i = 0; i < 5; i++) { if (i < fullStars) { stars.push( ) } else if (i === fullStars && hasHalfStar) { stars.push( ) } else { stars.push( ) } } return stars } const ClientReviews = React.forwardRef( ({ reviews = [], className, ...props }, ref) => { const totalRating = React.useMemo((): number => { if (reviews.length === 0) return 0 const totalRatings = reviews.map((review) => review.rating) const ratingFixed = totalRatings.map( (rating) => Math.round(rating * 10) / 10 ) const totalRating = ratingFixed.reduce((acc, rating) => acc + rating, 0) / totalRatings.length return Math.round(totalRating * 10) / 10 }, [reviews]) return (

Client Reviews

{totalRating} {fillStars(totalRating)}

{reviews.map((review) => (

{review.reviewer}

{review.rating}

"{review.review}"

{review.reviewer}, {review.roleReviewer} {review.date}

))}

) } ) ClientReviews.displayName = "ClientReviews" export { ClientReviews }