/**
 * The project fact list.
 *
 * Each row needs the `.fact` class: that is what carries the two-column grid
 * (0.65fr / 1.35fr) and the hairline rule. A bare <div> — as an earlier pass
 * rendered — leaves every label and value stacked vertically.
 *
 * Labels arrive with their colon already appended, so this does not have to
 * inspect its own content.
 */
export default function Facts({ facts }: { facts: any[] }) {
  if (!facts || facts.length === 0) {
    return null;
  }

  return (
    <dl className="facts">
      {facts.map((fact, index) => (
        <div className="fact" key={index}>
          <dt>{fact.label}</dt>
          <dd>
            {fact.url ? (
              <a href={fact.url} target="_blank" rel="noopener noreferrer">
                {fact.value}
              </a>
            ) : (
              fact.value
            )}
          </dd>
        </div>
      ))}
    </dl>
  );
}