import React, { type JSX } from 'react';

export class ElixFormsElement {
    label: JSX.Element;
    input: JSX.Element;
    separator: string;

    constructor(labelElement: React.ReactElement, inputElement: React.ReactElement, separator: string = '') {
        if (!labelElement || !inputElement) {
            throw new Error('labelElement and inputElement are required.');
        }

        this.label = labelElement;
        this.input = inputElement;
        this.separator = separator;
    }

    render(): JSX.Element {
        return (
            <div className="row mb-3 align-items-start">
                <div className="col-12 col-md-4">
                    <div className="text-md-end pe-md-3 mt-2">
                        {this.label}{this.separator}
                    </div>
                </div>
                <div className="col-12 col-md-8">
                    {this.input}
                </div>
            </div>
        );
    }
}