import { Review } from "@/types/product"
import { Star } from 'lucide-react'
import { useAuth } from "@/contexts/auth-context"
import Link from "next/link"

interface ReviewListProps {
  reviews: Review[]
}

export function ReviewList({ reviews }: ReviewListProps) {
  const { isLoggedIn } = useAuth()

  if (!isLoggedIn) {
    return (
      <p className="text-gray-600">Чтобы просматривать отзывы, пожалуйста, <Link href="/login" className="text-blue-600 hover:underline">войдите в систему</Link>.</p>
    )
  }

  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold">Отзывы покупателей</h3>
      {reviews.length === 0 ? (
        <p>Пока нет отзывов. Будьте первым!</p>
      ) : (
        reviews.map((review) => (
          <div key={review.id} className="border-b pb-4">
            <div className="flex items-center gap-2">
              <div className="flex">
                {[1, 2, 3, 4, 5].map((star) => (
                  <Star
                    key={star}
                    className={`h-5 w-5 ${
                      star <= review.rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'
                    }`}
                  />
                ))}
              </div>
              <span className="text-sm text-gray-500">
                {new Date(review.createdAt).toLocaleDateString()}
              </span>
            </div>
            <p className="mt-2">{review.comment}</p>
          </div>
        ))
      )}
    </div>
  )
}