import React from "react";
import { useContent } from "../../services/content";
import { SlidePage } from "../../components/SlidePage/SlidePage";
import { Headline } from "../../components/elements/Headline/Headline";
import "./RadEnablement.scss";

/**
 * Page header shown on every RadEnablement slide (title/subline from
 * content.header); the story icon on the right follows whichever story the
 * current view belongs to.
 *
 * @param {Object} props
 * @param {string} props.viewId - Currently shown view id.
 */
const RadHeader = ({ viewId }) => {
  const { content, views, stories } = useContent();
  if (!content.header) return null;

  const storyId = views.get(viewId)?.story;
  const storyHeaderIcon = storyId ? stories[storyId]?.header?.icon : null;

  return (
    <div className="rad-header">
      <div className="rad-header-content">
        <Headline text={content.header.title} level={1} color="orange" />
        <Headline text={content.header.subline} level={3} />
      </div>
      {storyHeaderIcon && (
        <div className="rad-header-icon">
          <img src={storyHeaderIcon} alt="" />
        </div>
      )}
    </div>
  );
};

/**
 * "RadEnablement Services" presentation app - the shared {@link SlidePage}
 * plus a persistent {@link RadHeader} (content: public/data/rad-content.json).
 */
export const RadEnablementPage = () => (
  <SlidePage
    basePath="/rad-enablement"
    startViewId="rad-intro"
    storyHubViewId="rad-select-story"
    classPrefix="rad"
    renderHeader={(viewId) => <RadHeader viewId={viewId} />}
  />
);