import React from "react";
import "./Headline.scss";

/**
 * Semantic heading with app-wide typography classes. Renders the content
 * JSON's "headline" (level 2) and "subheadline" (level 3) element types, and
 * is used directly for page headers.
 *
 * @param {Object} props
 * @param {string} props.text - Heading text.
 * @param {number} [props.level=1] - Heading level 1-6, controls both tag (h1-h6) and size class.
 * @param {"white"|"orange"} [props.color="white"] - Color variant class.
 */
export const Headline = ({ text, level = 1, color = "white" }) => {
  const Tag = `h${level}`;
  return <Tag className={`headline headline--level-${level} headline--${color}`}>{text}</Tag>;
};