import type { FC } from 'react';
import React from 'react';
import cx from 'classnames';

export const CLASS_NAME = 'FormControl';

export interface Props {
    testId?: string;
    className?: string;
    style?: React.CSSProperties;
    /**
     * The control fields you want to show
     */
    children: React.ReactNode;
    /**
     * The error message to show
     */
    errorMessage?: JSX.Element | string;
    /**
     * A note that is displayed under the control
     */
    note?: JSX.Element | string;
}

/**
 * Control is a wrapper for form controls that adds a note and an error message.
 *
 * @type organism
 * @status deprecated
 * @tags form-elements
 */
export const Control: FC<Props> = ({
    className,
    style,
    testId = CLASS_NAME,
    children,
    errorMessage,
    note,
}) => {
    const mainClassName = cx(CLASS_NAME, className, {
        [`${CLASS_NAME}-error`]: !!errorMessage,
    });

    return (
        <div className={mainClassName} style={style} data-testid={testId}>
            <div className={`${CLASS_NAME}-Input`}>{children}</div>
            <div className={`${CLASS_NAME}-note`}>{note}</div>
            {errorMessage && <div className={`${CLASS_NAME}-error-message`}>{errorMessage}</div>}
        </div>
    );
};