"use client"

import * as React from "react"

import { cn } from "@/shared/lib/utils"

export interface SkipLinkProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /** 跳转目标锚点，默认 #main-content */
  href?: string
  /** 链接文字，默认"跳转到主内容" */
  children?: React.ReactNode
}

/**
 * 跳转链接组件。
 * 视觉隐藏，获得焦点时高对比度显示，供键盘用户跳过导航直达主内容。
 */
export const SkipLink = React.forwardRef<HTMLAnchorElement, SkipLinkProps>(
  (
    { href = "#main-content", className, children = "跳转到主内容", ...props },
    ref
  ) => {
    return (
      <a
        ref={ref}
        href={href}
        className={cn(
          "sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:border focus:border-border focus:bg-background focus:p-4 focus:text-foreground focus:shadow-lg focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
          className
        )}
        {...props}
      >
        {children}
      </a>
    )
  }
)
SkipLink.displayName = "SkipLink"
