import { useParams } from 'react-router';

// The second panel, reading the URL rather than being told by its sibling.
//
// The shell registers `<prefix>` and `<prefix>/:section`, so a plugin's sections are addressable,
// linkable and cmd-clickable — the same convention every core screen follows. Panels read `useParams`
// independently; nothing is passed between them, so they cannot disagree.
export const ExampleDetail = () => {
  const { section } = useParams();

  return (
    <div className="h-full overflow-auto p-6">
      <h2 className="text-lg font-semibold text-duck-dark">Detail</h2>
      <p className="mt-1 text-sm text-duck-dark/60">
        Section from the URL: <code>{section ?? '(none)'}</code>
      </p>
      <p className="mt-3 text-xs text-duck-dark/40">
        Try <code>/example/anything</code> — this panel reads it from <code>useParams</code>, with no state passed from
        the panel beside it.
      </p>
    </div>
  );
};