"use client";

import { useEffect } from "react";
import { StarRating } from "@/components/product/star-rating";
import { useReviewSummaryStore } from "@/store/review-summary-store";

// Promedio + cantidad de reseñas aprobadas. No renderiza nada si el
// producto aun no tiene reseñas (ni un link vacio, en la ficha).
export function CardRating({ productId, href }: { productId: string; href?: string }) {
  const load = useReviewSummaryStore((state) => state.load);
  const entry = useReviewSummaryStore((state) => state.summary[productId]);
  useEffect(() => load(), [load]);
  if (!entry || entry.count === 0) return null;
  const content = (
    <>
      <StarRating value={entry.average} />
      {entry.average.toLocaleString("es-CO", { minimumFractionDigits: 1 })} ({entry.count} {entry.count === 1 ? "reseña" : "reseñas"})
    </>
  );
  const className = "flex items-center gap-1.5 text-xs font-bold text-slate-500";
  return href ? <a href={href} className={`${className} mt-3 hover:text-ari-coral`}>{content}</a> : <span className={className}>{content}</span>;
}