import * as React from "react";
import { cn } from "@/lib/utils";

type SkipLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
  /** id of the element the link should jump to (target of the focus). */
  targetId?: string;
};

/**
 * "Skip to main content" link.
 *
 * Renders off-screen by default so it does not intrude on the visual
 * design, and slides into view when it receives keyboard focus. Used at
 * the very top of <Layout> so keyboard users can bypass the sidebar and
 * the global scan element on the first Tab.
 *
 * Voice: instrument-label eyebrow caps. Same hairline surface as the
 * sidebar so it feels native when it appears.
 */
export function SkipLink({
  targetId = "main-content",
  className,
  children = "Skip to main content",
  ...props
}: SkipLinkProps) {
  return (
    <a
      href={`#${targetId}`}
      className={cn("skip-link", className)}
      {...props}
    >
      {children}
    </a>
  );
}