import React from 'react';
import {classNames} from '../../utilities/css';

import styles from './Label.scss';

export interface Props {
  /** Label content */
  children?: string;
  /** A unique identifier for the label */
  id: string;
  /** Visually hide the label */
  hidden?: boolean;
}

export function labelID(id: string) {
  return `${id}Label`;
}

export default function Label({children, id, hidden}: Props) {
  const className = classNames(styles.Label, hidden && styles.hidden);

  return (
    <div className={className}>
      <label id={labelID(id)} htmlFor={id} className={styles.Text}>
        {children}
      </label>
    </div>
  );
}
