import { Fragment } from 'react';

/**
 * Un chemin de navigation cPanel, rendu identique partout.
 *
 * Ces chemins apparaissent sur presque toutes les pages de ce sujet, écrits à la
 * main jusqu'ici. Le jour où cPanel réorganise ses menus, ce qui arrive, un
 * `grep CpanelPath` les liste tous. Une flèche tapée au clavier, non.
 *
 * @example <CpanelPath steps={['Email', 'Track Delivery']} url="mail/delivery/index.html" />
 */
export function CpanelPath({ steps, url }: { steps: string[]; url?: string }) {
  return (
    <span className="inline-flex flex-wrap items-baseline gap-1 text-sm">
      <span className="font-medium">cPanel</span>
      {steps.map((step) => (
        <Fragment key={step}>
          <span aria-hidden className="text-fd-muted-foreground">
            →
          </span>
          <span className="font-medium">{step}</span>
        </Fragment>
      ))}
      {url ? (
        <code className="text-fd-muted-foreground text-xs">{url}</code>
      ) : null}
    </span>
  );
}