import { useContent } from "../../services/content";

/**
 * Persistent per-story icon badge shown top-right on every VAS slide of a
 * story except its own storyTitle cover (which already fills the screen).
 * Unlike RAD, VAS views author their own headline text per view (there is
 * no app/story-wide title to repeat) - only the story icon is a constant,
 * from stories.<id>.header.icon in vas-content.json.
 *
 * @param {Object} props
 * @param {string} props.viewId - Currently shown view id.
 */
export const VasHeader = ({ viewId }) => {
  const { views, stories, getView } = useContent();

  const storyId = views.get(viewId)?.story;
  if (!storyId) return null;

  const view = getView(viewId);
  const hasStoryTitle = view?.elements?.some((block) => block.type === "storyTitle");
  if (hasStoryTitle) return null;

  const icon = stories[storyId]?.header?.icon;
  if (!icon) return null;

  return (
    <div className="vas-header">
      <img className="vas-header-icon" src={icon} alt="" />
    </div>
  );
};