/**
 * SkipLink — WCAG 2.1 AA (spec 115).
 *
 * Renders an anchor to the page's main landmark that becomes visible on
 * keyboard focus. Must be the FIRST focusable element inside the app layout.
 *
 * Integration contract (owned by app-shell, NOT this component):
 *   1. Render `<SkipLink />` as the first child of the root layout element
 *      (before any header, sidebar, or navigation).
 *   2. Place `id="main-content"` on the `<main>` landmark element.
 *
 * Styling comes entirely from the `.skip-link` class defined in
 * `packages/ui/src/tokens/index.css` — this component is theme-agnostic.
 */
import * as React from 'react'

export interface SkipLinkProps {
  /** id of the <main> landmark to jump to. Default: "main-content". */
  targetId?: string
  /** Visible and screen-reader-announced label. Default: "Skip to main content". */
  label?: string
}

export function SkipLink({
  targetId = 'main-content',
  label = 'Skip to main content',
}: SkipLinkProps) {
  return (
    <a href={`#${targetId}`} className="skip-link">
      {label}
    </a>
  )
}

SkipLink.displayName = 'SkipLink'