import PropTypes from "prop-types";
import React, { ReactElement } from "react";

import classNames from "classnames";

export interface FormRowProps {
    children: ReactElement[];
    /** CSS class names. */
    className?: string;
    /** Indicates whether items in the row should take up as much width as possible */
    isFullWidth?: boolean;
    testSection?: string;
}

const Row = ({ // eslint-disable-line @typescript-eslint/explicit-function-return-type
    children,
    className,
    isFullWidth,
    testSection,
    ...props
}: FormRowProps) => {
    const mappedChildren = children.map((child, idx) => {
        const rowClassname = classNames({
            "flex--1": isFullWidth,
            "push-double--right": idx < children.length - 1,
        });
        return (
            <div key={idx} className={rowClassname}>
                {child}
            </div>
        );
    });
    return (
        <div data-test-section={testSection} className={classNames("flex", className)} {...props}>
            {mappedChildren}
        </div>
    );
};

Row.propTypes = {
    children: PropTypes.node.isRequired,
    /** CSS class names. */
    className: PropTypes.string,
    /** Indicates whether items in the row should take up as much width as possible */
    isFullWidth: PropTypes.bool,
    testSection: PropTypes.string,
};

export default Row;