"use client";

import { Button } from "@heroui/react";
import { ProductDetailReview } from "@/lib/product-detail/types";
import { ReviewCard } from "./ReviewCard";
import { ProductDetailReviewsSkeleton } from "../state/ProductDetailReviewsSkeleton";

type Props = {
    reviews: ProductDetailReview[] | undefined;
    total: number;
    hasMore: boolean;
    isLoading: boolean;
    onLoadMore: () => void;
};

export function ReviewList({ reviews, total, hasMore, isLoading, onLoadMore }: Props) {
    if (reviews === undefined) {
        return <ProductDetailReviewsSkeleton />;
    }

    if (reviews.length === 0) {
        return null; // Empty state managed by panel
    }

    return (
        <div className="space-y-6">
            <ul className="m-0 list-none space-y-4 p-0">
                {reviews.map((review) => (
                    <li key={review._id}>
                        <ReviewCard review={review} />
                    </li>
                ))}
            </ul>

            {hasMore && (
                <div className="flex flex-col items-center gap-3 pt-2">
                    <p className="text-sm text-[var(--muted)]">
                        Showing {reviews.length} of {total} reviews
                    </p>
                    <Button
                        variant="ghost"
                        onPress={onLoadMore}
                        isPending={isLoading}
                        className="w-full md:w-auto text-[var(--foreground)] border border-[var(--separator)]"
                    >
                        Show more reviews
                    </Button>
                </div>
            )}
        </div>
    );
}
