import { useNav } from './routes';
import { sectionFor } from './sections';

/**
 * The detail panel's chrome header — the section's own name, not the word "Detail".
 *
 * ── Why this replaces a row inside the panel ──
 *
 * The panel used to draw its own header strip with the section label and its hint, UNDER the workspace's
 * chrome header, which said "Detail". Two bars stacked, one of them saying nothing: the top of the panel
 * was three rows of furniture before any content.
 *
 * A panel meta may supply its own `header`, which is the mechanism for exactly this — several plugins
 * already do it. So the section's name goes where a panel's name goes, and the row inside is gone.
 *
 * ── The hint went with it ──
 *
 * "Photos and video the site is built from" is useful in the NAV, where somebody is choosing between
 * ten sections. Repeated above the thing they chose, it is a caption for a decision already made.
 *
 * ── The actions are NOT here ──
 *
 * Build and Publish were, briefly. They belong to the panel rather than to the workspace's chrome: the
 * chrome header scrolls out of reach on a long section, and it is shared furniture that every panel in
 * the app draws the same way. They live in DetailPanel's own bar now, which is pinned above the scroll
 * area and always reachable.
 */
export const DetailHeader = () => {
  const { section: key } = useNav();
  const section = sectionFor(key);
  const Icon = section.icon;

  return (
    <>
      <Icon className="h-3.5 w-3.5 shrink-0" />
      <span className="flex-1 truncate text-xs font-medium">{section.label}</span>
    </>
  );
};