import * as React from 'react'
import { cn } from '../lib/cn'

export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
  required?: boolean
}

export const FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>(
  ({ className, required, children, ...props }, ref) => (
    <label ref={ref} className={cn('text-body-2 font-medium text-ink', className)} {...props}>
      {children}
      {required ? (
        <span className="ms-0.5 text-danger" aria-hidden="true">
          {/* ms-0.5 (2px) tight-primitive exception: required-marker offset */}*
        </span>
      ) : null}
    </label>
  ),
)
FormLabel.displayName = 'FormLabel'