import type { PropsWithChildren } from 'react';
import type React from 'react';

/**
 * CONDITIONAL WRAPPER
 * this is a cool looking thing i found on dev.to and decided to try it
 * ( https://dev.to/dailydevtips1/conditional-wrapping-in-react-46o5 )
 * it is used to decide and render wrappers, to remove the need for condition inside the wrapper
 * which obviously is a bad thing to do and elimnates the need to double the code in conditional render
 *
 * OHH GOD I LOVE THIS COMPONENT
 * it just eliminates so much duplicit code, which looks so ugly
 *
 * Check render function of Main for example
 */

/**
 * It is used like this:
 * <ConditionalWrapper
 *   condition={someBooleanValueProbably}
 *   wrapper={(children) => <Wrapper>{children}</Wrapper>}
 * >
 *   <Text>I'm a dumb text!</Text>
 * </ConditionalWrapper>
 */

export interface ConditionalWrapperProps extends PropsWithChildren {
  condition: unknown;
  wrapper: (children: React.ReactNode) => React.ReactNode;
  // should look like wrapper={children => <Wrapper>{children}</Wrapper>}
  //children: React.ReactElement;
}

export const ConditionalWrapper: React.FC<ConditionalWrapperProps> = ({ condition, wrapper, children, ...rest }) => {
  rest satisfies Record<PropertyKey, never>;
  return condition ? wrapper(children) : children;
};