"use client"

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

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-center py-12">
                <div className="h-12 w-12 rounded-full bg-muted/50 mx-auto mb-4 flex items-center justify-center">
                    <PenLine className="h-6 w-6 text-muted-foreground/50" />
                </div>
                <p className="text-muted-foreground font-medium">No reviews written yet</p>
                <p className="text-sm text-muted-foreground/70 mt-1">Share your thoughts on shows you&apos;ve attended</p>
            </div>
        )
    }

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