import Link from "next/link";

/**
 * BackLink — small "← Page" navigation cue that sits above a page's
 * `<h1 className="accent-rule">` heading.
 *
 * Why this exists
 * ---------------
 * The pattern was originally written inline on /team and /dashboard/new
 * as `<Link className="inline-flex …"><span>←</span> Title</Link>`.
 * That's wrong because `.accent-rule` (defined in globals.css) sets
 * `display: inline-block` on the H1 — so an inline-flex link followed by
 * an inline-block H1 are both inline-level, and end up on the same
 * baseline whenever there's horizontal room for them. The `mb-4` on the
 * link does nothing because vertical margin between inline boxes
 * doesn't push siblings to a new line.
 *
 * Solving it: this component renders the link as a block-level flex
 * container with `w-fit` so it shrinks to its content (and its hover
 * area doesn't span the gutter). The trailing block element below sits
 * cleanly on its own line.
 *
 * Use it whenever a page has a back-link above an `accent-rule` H1.
 * The two prior callsites (/team and /dashboard/new) have been
 * migrated; new pages should just use this directly.
 */
export function BackLink({
  href,
  label,
}: {
  href: string;
  label: string;
}) {
  return (
    <Link
      href={href}
      className="flex w-fit items-center gap-1.5 mb-4 text-xs font-medium text-text-muted hover:text-text-primary transition-colors"
    >
      <span aria-hidden="true">←</span>
      <span>{label}</span>
    </Link>
  );
}