import React, { ReactNode } from 'react';
import styles from './FormGroup.module.scss';

interface FormGroupProps {
    children?: ReactNode;
    label?: string;
    required?: boolean;
    error?: string;
    helpText?: string;
    className?: string;
}

export function FormGroup({
    children,
    label,
    required,
    error,
    helpText,
    className = '',
}: FormGroupProps) {
    return (
        <div className={`${styles.formGroup} ${className}`}>
            {label && (
                <label className={styles.label}>
                    {label}
                    {required && <span className={styles.required}> *</span>}
                </label>
            )}
            {children}
            {error && <div className={styles.error}>{error}</div>}
            {helpText && !error && <div className={styles.helpText}>{helpText}</div>}
        </div>
    );
}