import { useIsClient } from 'usehooks-ts';

import SpinnerSVG from './svg/SpinnerSVG';

export default function ClientOnly({
  children,
  serverChildren,
}: {
  children: React.ReactNode[] | React.ReactNode;
  serverChildren?: React.ReactNode[] | React.ReactNode;
}) {
  const isClient = useIsClient();
  if (isClient) return children;
  if (serverChildren) return serverChildren;
  return (
    <div className='flex h-full w-full items-center justify-center'>
      <SpinnerSVG />
    </div>
  );
}