import { text } from "../lib/config";
import { format } from "../lib/format";
import { Html } from "./Html";

/** "Battery · 3 specs" heading row of a spec group (Pro groups). */
export function GroupHeading({ group, colSpan }) {
  return (
    <tr className="pcfw-table__group">
      <th scope="colgroup" colSpan={colSpan}>
        <Html className="pcfw-table__group-label" html={group.label} />
        <span className="pcfw-table__group-count">
          {format(
            group.count === 1
              ? text("specsOne", "%d spec")
              : text("specsMany", "%d specs"),
            group.count,
          )}
        </span>
      </th>
    </tr>
  );
}
