"use client"

import { useEffect, useState } from "react"
import { ReviewCard } from "@/components/reviews/review-card"
import { getApiUrl } from "@/lib/api-config"

export function UserReviewsList({ userId }: { userId: number }) {
    const [reviews, setReviews] = useState<any[]>([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        const token = localStorage.getItem("token")
        if (!token) return

        fetch(`${getApiUrl()}/users/${userId}/reviews`, {
            headers: { Authorization: `Bearer ${token}` }
        })
            .then(res => res.json())
            .then(data => setReviews(data))
            .catch(err => console.error(err))
            .finally(() => setLoading(false))
    }, [userId])

    if (loading) return <div>Loading reviews...</div>

    if (reviews.length === 0) {
        return <div className="text-muted-foreground">No reviews written yet.</div>
    }

    return (
        <div className="space-y-4">
            {reviews.map((review) => (
                <ReviewCard key={review.id} review={review} />
            ))}
        </div>
    )
}