import { Children, cloneElement, ReactElement, ReactNode } from 'react';

type Props = {
  isColumn?: boolean;
  children: ReactNode;
};

const FormCheckRadioGroup = (props: Props) => {
  return (
    <div
      className={`flex justify-start flex-wrap -mb-3 ${
        props.isColumn ? 'flex-col' : ''
      }`}
    >
      {Children.map(props.children, (child: ReactElement) =>
        cloneElement(child as ReactElement<{ className?: string }>, {
          className: `mr-6 mb-3 last:mr-0 ${
            (child.props as { className?: string }).className || ''
          }`,
        }),
      )}
    </div>
  );
};

export default FormCheckRadioGroup;