import React from 'react';
import { Star, User } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/Components/ui/avatar";
import { useTranslation } from '@/hooks/useTranslation';

export default function ReviewList({ reviews }) {
    const { t } = useTranslation();

    if (!reviews || reviews.length === 0) {
        return (
            <div className="text-center py-8 text-muted-foreground border border-dashed rounded-xl">
                {t('No reviews yet. Be the first to review!')}
            </div>
        );
    }

    return (
        <div className="space-y-6">
            {reviews.map((review) => (
                <div key={review.id} className="flex gap-4 border-b border-border/50 pb-6 last:border-0 last:pb-0">
                    <Avatar className="w-10 h-10 border bg-muted">
                        <AvatarImage src={review.user?.avatar_path ? `/storage/${review.user.avatar_path}` : ''} />
                        <AvatarFallback><User className="w-5 h-5 text-muted-foreground" /></AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                        <div className="flex items-center justify-between mb-1">
                            <span className="font-bold text-sm">{review.user?.name || t('Unknown User')}</span>
                            <span className="text-xs text-muted-foreground">{new Date(review.created_at).toLocaleDateString()}</span>
                        </div>
                        <div className="flex items-center gap-0.5 mb-2">
                            {Array.from({ length: 5 }).map((_, i) => (
                                <Star key={i} className={`w-3.5 h-3.5 ${i < review.rating ? 'fill-amber-500 text-amber-500' : 'fill-muted text-muted'}`} />
                            ))}
                        </div>
                        {review.comment && (
                            <p className="text-sm text-foreground/90 mt-2 leading-relaxed">
                                {review.comment}
                            </p>
                        )}
                    </div>
                </div>
            ))}
        </div>
    );
}