import PropTypes from 'prop-types';
import CustomPropTypes from "../../../utils/prop-types/index.js";
import getColor from "../../../utils/colors/getColor.js";
import useResponsiveValues from "../../../hooks/breakpoint/useResponsiveValues/index.js";
import getMarginClasses from "../../../utils/css/getMarginClasses.js";
import cx from "../../../utils/css/cx.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);

/**
 * A section or flag link that generally accompanies the headline of POLITICO
 * stories. Interactive stories at POLITICO can often make use of the
 * ["POLITICS"](https://www.politico.com/news/politics) eyebrow, though some
 * projects may require other eyebrows.
 */
const Eyebrow = function Eyebrow(props) {
  const {
    text,
    link,
    margin,
    fg
  } = props;

  // margins
  const marginValue = useResponsiveValues(margin);
  const margins = getMarginClasses(marginValue, {
    defaultSide: 'y',
    sides: ['y', 't', 'b']
  });
  return <a href={link} className={cls('eyebrow', margins)} style={{
    '--Eyebrow-fg': getColor(fg)
  }}>
      {text}
    </a>;
};
Eyebrow.defaultProps = {
  text: undefined,
  link: undefined,
  margin: undefined,
  fg: undefined
};
Eyebrow.propTypes = {
  /**
   * The text of the eyebrow. This is usually the name of the tag page the
   * eyebrow is linking to.
   */
  text: PropTypes.string,
  /**
   * The URL of the tag page that the eyebrow is linking to.
   */
  link: PropTypes.string,
  /**
   * The margin above and below the eyebrow. Margins can be specified as one
   * spacing value that gets used on top and bottom or separate `tb` values.
   * The values correspond to levels of our spacing scale (e.g., `"4"`
   * corresponds to `$spacing-4`).
   */
  margin: CustomPropTypes.responsive(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    x: PropTypes.string,
    y: PropTypes.string
  }), PropTypes.shape({
    t: PropTypes.string,
    r: PropTypes.string,
    b: PropTypes.string,
    l: PropTypes.string
  })])),
  /**
   * Sets the foreground color of the eyebrow, which will be POLITICO's brand red by default.
   * This prop accepts either a color name provided by this library or a CSS
   * color value.
   */
  fg: PropTypes.string
};
export default Eyebrow;