import { useSearchParams } from 'react-router';
import { DEFAULT_SECTION, isSectionKey, sectionFor } from './sections';
import { PublishButton } from './PublishButton';

/**
 * 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.
 *
 * ── And Publish, on the right ──
 *
 * The one action that belongs to every section rather than to any of them. It is here because it is
 * what you do after editing anything, and a header is the one piece of chrome every panel already has.
 */
export const DetailHeader = () => {
  const [params] = useSearchParams();
  const raw = params.get('section');
  const section = sectionFor(isSectionKey(raw) ? raw : DEFAULT_SECTION);
  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>
      {/* Right of the name, on every section. Publishing is the last step of every edit and it used to
          live in one card at the bottom of one section — see PublishButton for why that was wrong. */}
      <PublishButton />
    </>
  );
};