import * as React from 'react';
import { clsx } from 'clsx';

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

export function Label({ required, className, children, ...props }: LabelProps) {
  return (
    <label
      className={clsx(
        'block text-sm font-medium text-[var(--bl-text-secondary,#a0a0b0)]',
        className
      )}
      {...props}
    >
      {children}
      {required && (
        <span className="ml-0.5 text-red-400" aria-hidden="true">
          *
        </span>
      )}
    </label>
  );
}