"use client";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Star, StarHalf } from "lucide-react";

// Mock data for recent reviews
// const recentReviews = [
//   {
//     id: 1,
//     name: "Alex Johnson",
//     avatar: "/avatars/01.png",
//     initials: "AJ",
//     productName: "Wireless Earbuds",
//     rating: 5,
//     comment: "Amazing sound quality and battery life!",
//     date: "2 days ago",
//   },
//   {
//     id: 2,
//     name: "Sarah Miller",
//     avatar: "/avatars/02.png",
//     initials: "SM",
//     productName: "Fitness Tracker",
//     rating: 4,
//     comment: "Works great but the app could be better.",
//     date: "3 days ago",
//   },
//   {
//     id: 3,
//     name: "David Wilson",
//     avatar: "/avatars/03.png",
//     initials: "DW",
//     productName: "Smart Watch",
//     rating: 3.5,
//     comment: "Good product for the price, but charging is slow.",
//     date: "5 days ago",
//   },
//   {
//     id: 4,
//     name: "Emma Chen",
//     avatar: "/avatars/04.png",
//     initials: "EC",
//     productName: "Bluetooth Speaker",
//     rating: 5,
//     comment: "Best speaker I've ever owned!",
//     date: "1 week ago",
//   },
// ];

interface ReviewsProps{
  reviews?: any[]
}

export function RecentReviews({reviews}: ReviewsProps) {

  console.log(reviews)
  return (
    <div className="space-y-4">
      {reviews && reviews.map((review) => (
        <div key={review.id} className="flex items-start space-x-4">
          {/* <Avatar>
            <AvatarImage src={review.avatar} alt={review.name} />
            <AvatarFallback>{review.initials}</AvatarFallback>
          </Avatar> */}
          <div className="space-y-1">
            <div className="flex items-center space-x-2">
              <h4 className="font-semibold">{review?.profile?.full_name}</h4>
              <span className="text-xs text-muted-foreground">{review.created_on}</span>
            </div>
            <p className="text-sm text-muted-foreground">Product: {review.variant.name}</p>
            <div className="flex items-center space-x-1">
              {Array.from({ length: Math.floor(review.rating) }).map((_, i) => (
                <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
              ))}
              {review.rating % 1 === 0.5 && (
                <StarHalf className="h-4 w-4 fill-yellow-400 text-yellow-400" />
              )}
            </div>
            <p className="text-sm">{review.review}</p>
          </div>
        </div>
      ))}
    </div>
  );
}