'use client';

import * as React from 'react';
import * as LabelPrimitive from '@radix-ui/react-label';

import { cn } from '../../shared/utils';

/**
 * Accessible form field label.
 *
 * @description
 * Styled label with built-in support for error and disabled peer states.
 * Renders as a Radix UI label for full accessibility semantics.
 * Supports the standard size scale (`sm`, `md`, `lg`) for consistent form alignment.
 *
 * @ai-rules
 * 1. Always associate with the input using matching `htmlFor` and `id` props.
 * 2. Inside a `<Form>`, prefer `<FormLabel>` — it auto-connects to the field via context.
 * 3. Use the `size` prop to match the corresponding Input/Select size.
 */
function Label({
  className,
  size = 'md',
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root> & {
  /**
   * Size variant — matches the form component sizing scale.
   * - `sm`: text-xs
   * - `md`: text-sm — **default**
   * - `lg`: text-base
   */
  size?: 'sm' | 'md' | 'lg';
}) {
  const sizeClasses = {
    sm: 'text-xs',
    md: 'text-sm',
    lg: 'text-base',
  };

  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        sizeClasses[size],
        className
      )}
      {...props}
    />
  );
}

export { Label };