import React from "react";
import PropTypes from "prop-types";
import "./StoryTitle.scss";

/**
 * Full-bleed story opener ("storyTitle" element type): big title over an
 * optional background artwork.
 *
 * @param {Object} props
 * @param {string} props.title - Story title text.
 * @param {string} [props.background] - Background image URL.
 */
export const StoryTitle = ({ title, background }) => {
  return (
    <div className="story-title">
      {background && <img className="story-title-background" src={background} alt="" />}
      <h1>{title}</h1>
    </div>
  );
};

StoryTitle.propTypes = {
  title: PropTypes.string.isRequired,
  background: PropTypes.string,
};