/**
 * Render item in group of controls
 *
 * @author Brauer Ilya
 * @date 2022-02-04
 */
import * as React from 'react';

import * as styles from './groupInput.m.scss';
import {joinClassNames} from '../../utils/joinClassNames';

interface IProps {
    index: number;
    isFirst: boolean;
    isLast: boolean;
    width?: React.CSSProperties['width'];
}

export class GroupItem extends React.PureComponent<IProps> {
    override render () {
        const className = joinClassNames(
            styles.groupItem,
            [styles.firstItem, this.props.isFirst],
            [styles.lastItem, this.props.isLast],
            [styles.customWidth, this.props.width !== undefined]
        );

        const style = this.props.width !== undefined ? {width: this.props.width} : undefined;

        return (
            <div className={className} style={style}>
                {this.props.children}
            </div>
        );
    }
}