// @design-system: primitives/Label
// Registered at /design-system#label-primitive - Phase 3 (Agent 3E) will render the gallery.

import * as RadixLabel from '@radix-ui/react-label';
import { cn } from '@/lib/cn';

/** Props for the Label component */
export interface LabelProps extends React.ComponentPropsWithoutRef<typeof RadixLabel.Root> {
  /** Shows a required asterisk after the label text. */
  required?: boolean;
}

/**
 * Multideal Label primitive - wraps Radix Label.
 *
 * Use `required` to display the required asterisk (aria-hidden so screen readers
 * use FormField's `aria-required` instead).
 *
 * @example
 * ```tsx
 * <Label htmlFor="phone" required>
 *   {t('phone')}
 * </Label>
 * ```
 */
export function Label({ className, required, children, ...props }: LabelProps) {
  return (
    <RadixLabel.Root
      className={cn(
        'block text-sm font-medium text-neutral-700',
        'leading-normal select-none',
        className,
      )}
      {...props}
    >
      {children}
      {required && (
        <span aria-hidden="true" className="text-danger-600 ms-0.5">
          {' '}
          *
        </span>
      )}
    </RadixLabel.Root>
  );
}