import { text } from "../lib/config";
import { format } from "../lib/format";
import { Html } from "./Html";
import { StarIcon } from "./icons";
import { slot } from "../lib/slots";

/** Rating (when the product has reviews) and stock line under the name. */
export function ProductMeta({ product }) {
  const { rating, stock } = product;
  const Stock = slot("stock");

  if (!rating && !stock) {
    return null;
  }

  return (
    <div className="pcfw-table__meta">
      {rating && (
        <span className="pcfw-table__rating">
          <span className="pcfw-screen-reader-text">
            {format(text("ratedOf", "Rated %s out of 5"), rating.average)}
          </span>
          <span aria-hidden="true" className="pcfw-table__stars">
            <StarIcon />
            <strong>{rating.average.toFixed(1)}</strong>
          </span>
          {format(
            rating.count === 1
              ? text("reviewsOne", "(%d review)")
              : text("reviewsMany", "(%d reviews)"),
            rating.count,
          )}
        </span>
      )}
      {stock &&
        (Stock ? (
          <Stock
            status={stock.status}
            html={stock.text}
            className={`pcfw-table__stock is-${stock.status}`}
          />
        ) : (
          <Html
            className={`pcfw-table__stock is-${stock.status}`}
            html={stock.text}
          />
        ))}
    </div>
  );
}
