import { ReactNode, useEffect, useRef } from 'react';

interface Props {
  element: ReactNode;
  className?: string;
}

export function ClassNameWrapper({ element, className }: Props) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!className?.split(' ').length) return;

    ref.current?.children
      .item(0)
      ?.classList.add(...className.split(' ').filter(Boolean));
  }, [className, element]);

  return <div ref={ref}>{element}</div>;
}
