"use client";

import { ProductDetailReview } from "@/lib/product-detail/types";
import { StarRatingDisplay } from "./StarRatingDisplay";

export function ReviewCard({ review }: { review: ProductDetailReview }) {
    // A relative time formatter
    const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
    const formatTime = (ts: number) => {
        const daysDiff = Math.round((ts - Date.now()) / (1000 * 60 * 60 * 24));
        if (daysDiff === 0) return "today";
        return rtf.format(daysDiff, 'day');
    };

    return (
        <article className="rounded-lg border border-[var(--separator)] bg-[var(--surface)] p-4 md:p-5">
            <h3 className="text-sm font-semibold text-[var(--foreground)] md:text-base">
                {review.title}
            </h3>
            <div className="mt-1 flex flex-wrap items-center gap-2">
                <StarRatingDisplay value={review.rating} size="sm" />
                {review.userName && (
                    <span className="text-sm text-[var(--muted)]">
                        {review.userName}
                    </span>
                )}
                <span className="text-sm text-[var(--muted)]">
                    · {formatTime(review.createdAt)}
                </span>
                {review.verifiedPurchase && (
                    <span className="text-xs font-medium text-[var(--success)] before:content-['·'] before:mr-2 before:text-[var(--muted)]">
                        Verified purchase
                    </span>
                )}
            </div>
            <p className="mt-2 whitespace-pre-wrap text-sm text-[var(--foreground)]/80">
                {review.content}
            </p>
            {review.helpfulCount > 0 && (
                <p className="mt-2 text-xs text-[var(--muted)]">
                    {review.helpfulCount} {review.helpfulCount === 1 ? "person" : "people"} found this helpful
                </p>
            )}
        </article>
    );
}
