"use client"

import * as React from "react"

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

export interface VisuallyHiddenProps
  extends React.HTMLAttributes<HTMLSpanElement> {
  children?: React.ReactNode
}

/**
 * 视觉隐藏但屏幕阅读器可读的组件。
 * 用于图标按钮的文字描述、表单标签的辅助说明等。
 */
export const VisuallyHidden = React.forwardRef<
  HTMLSpanElement,
  VisuallyHiddenProps
>(({ className, children, ...props }, ref) => {
  return (
    <span ref={ref} className={cn("sr-only", className)} {...props}>
      {children}
    </span>
  )
})
VisuallyHidden.displayName = "VisuallyHidden"
