import { track, trackSplit, effect } from 'ripple';

export interface ClientOnlyProps {
  children?: any;
  fallback?: any;
}

export component ClientOnly(props: ClientOnlyProps) {
  const [children, rest] = trackSplit(props, ['children']);
  const [fallback] = trackSplit(@rest, ['fallback']);

  const isClient = track(false);

  effect(() => {
    @isClient = true;
  });

  if (@isClient) {
    <@children />
  } else if (@fallback) {
    <@fallback />
  }
}