import React, {ReactNode} from 'react';
import './label.scss';

type LabelProps = {
    req?: boolean
    htmlFor?: string
    children?: ReactNode[] | ReactNode
    secondaryLabel?:ReactNode[] | ReactNode
};

/**
 * AM WEIRD
 */
const CustomLabel = ({
                         req = false,
                         htmlFor,
                         children,
                         secondaryLabel

                     }: LabelProps) => {

    return (
        <div className={'d-flex -flex-between'}>
            <label
                className={'custom-label'}
                htmlFor={htmlFor}>
                <span className={'d-flex justify-content-between'}>
                    {/*@ts-ignore*/}
                    {Array.isArray(children) ? children[0] : children}
                    {req && " *"}
                    {/*@ts-ignore*/}
                    {Array.isArray(children) && children.slice(1)}
                </span>
            </label>
            {secondaryLabel && <label
                className={'custom-label d-flex justify-content-end'}
                htmlFor={htmlFor}>
                <span>
                    {/*@ts-ignore*/}
                    {Array.isArray(secondaryLabel) ? secondaryLabel[0] : secondaryLabel}
                    {req && " *"}
                    {/*@ts-ignore*/}
                    {Array.isArray(secondaryLabel) && secondaryLabel.slice(1)}
                </span>
            </label>}
        </div>
    )
}

export default CustomLabel;