import React from 'react';
import './form.scss';

type FormProps = {
    children?: React.ReactNode;
    theme?: 'default' | 'light' | 'blue';
    styles?: React.CSSProperties; // better typing for inline styles
    customClass?: string
};
const CustomFormSection = ({ children,styles, theme = 'default', customClass = '' }: FormProps) => {
    // const modifiedChildren = React.Children.map(children, (child) => {
    //     if (React.isValidElement(child) && child.type === 'div' && child.props.className?.includes('row')) {
    //         const updatedClassName = `${child.props.className || ''} gy-3`;
    //         return React.cloneElement(child, {
    //             className: updatedClassName.trim(),
    //         } as React.HTMLProps<HTMLDivElement>);
    //     }
    //     return child;
    // });
    return <div style={styles} className={`${theme} ${customClass} user-form`}>{children}</div>;
    // return <div className={theme}>{modifiedChildren}</div>;
};
export default CustomFormSection;