import React from 'react';
import { cn } from '@/lib/utils';

/**
 * FormLabel Component
 * Consistent label styling with required indicator and help text tooltip
 */

export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
  htmlFor?: string;
  required?: boolean;
  helpText?: string;
  optionalText?: string;
  className?: string;
  children: React.ReactNode;
}

export const FormLabel: React.FC<FormLabelProps> = ({
  htmlFor,
  required = false,
  helpText,
  optionalText = '(optional)',
  className,
  children,
  ...props
}) => {
  return (
    <label
      htmlFor={htmlFor}
      className={cn(
        'block text-sm font-semibold text-text-primary mb-2',
        'font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
        className
      )}
      {...props}
    >
      <span className="inline-flex items-center gap-1">
        {children}
        {required && (
          <span className="text-danger" aria-label="required">
            *
          </span>
        )}
        {!required && optionalText && (
          <span className="text-xs text-text-secondary font-normal">
            {optionalText}
          </span>
        )}
      </span>
      {helpText && (
        <span className="ml-2 text-xs text-text-secondary font-normal">
          {helpText}
        </span>
      )}
    </label>
  );
};

FormLabel.displayName = 'FormLabel';

export default FormLabel;