import React from 'react';
import classNames from 'classnames';
import './Label.scss';
export interface LabelProps
  extends React.LabelHTMLAttributes<HTMLLabelElement> {
  /**
   * Label text
   */
  label: string | React.ReactNode;
  /**
   * Label color
   */
  color?:
    | 'default'
    | 'primary'
    | 'info'
    | 'danger'
    | 'success'
    | 'warning'
    | 'number'
    | 'approved'
    | 'review'
    | 'rejected'
    | 'new';
  /**
   * Label size
   */
  size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
  /**
   * Label styles
   */
  className?: string;
  /**
   * If true adds the astrisk at the begining
   */
  required?: boolean;
}

/**
 * Label UI component
 */
const Label = ({
  label = '',
  color = 'default',
  size = 'small',
  className = '',
  required = false,
  ...props
}: LabelProps) => {
  return (
    <label
      {...props}
      className={classNames(
        'storybook-label',
        `storybook-label--${color}`,
        `storybook-label--${size}`,
        className,
        {
          ['storybook-label--required']: required,
        }
      )}
    >
      {label}
    </label>
  );
};

export default Label;