import { Fragment, type ReactNode } from "react";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
	fact: {
		display: "inline-block",
	},
});

/**
 * Short facts joined by " · ". A narrow line breaks after a separator, and a
 * fact moves to the next line whole: "1" and "occurrence" on two lines read as
 * two facts. Only a fact wider than the whole line breaks inside itself.
 */
export default function FactLine({ facts }: { facts: readonly ReactNode[] }) {
	return facts.map((fact, index) => (
		<Fragment key={index}>
			{index > 0 && " "}
			<span {...stylex.props(styles.fact)}>
				{fact}
				{index < facts.length - 1 && " ·"}
			</span>
		</Fragment>
	));
}