import React from 'react';
import Block from './../Block/';
import style from './../../../style/';

interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
    /**
     * Text that will be visible on tooltip hover for help.
     */
    tooltipText?: string;
}

export const Label: React.FC<LabelProps> = (props) => {
    const { children, className, tooltipText } = props;

    return (
        <Block className={`${style.label} ${className}`}>
            <div className="flex-auto">{children}</div>
            {tooltipText && (
                <div className="ml-2 relative text-xs group">
                    <div className="flex items-center justify-center bg-gray-100 flex-shrink-0 rounded-full w-4 h-4 hover:bg-indigo-A700 hover:text-white">
                        ?
                    </div>
                    <div className=" opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-in-out transform absolute w-96 prose group-hover:right-0 right-[10000px] top-0 mr-6 px-4 py-3 bg-gray-50 text-xs text-gray-600 shadow-xl border border-gray-100 z-40">
                        {tooltipText}
                    </div>
                </div>
            )}
        </Block>
    );
};

Label.displayName = 'Label';

export default Label;
