import type { ReactNode } from 'react';

// boolean
export function Show(props: {
  when: boolean;
  children: ReactNode | (() => ReactNode);
  fallback?: ReactNode | (() => ReactNode);
}): ReactNode;

// truthy
export function Show<T>(props: {
  when: T | null | undefined | false | 0 | '';
  children: ReactNode | ((value: NonNullable<T>) => ReactNode);
  fallback?: ReactNode | (() => ReactNode);
}): ReactNode;

// boolean | truthy
export function Show<T>({
  children,
  when,
  fallback = null,
}: {
  when: T | boolean | null | undefined;
  children: ReactNode | ((value: NonNullable<T>) => ReactNode);
  fallback?: ReactNode | (() => ReactNode);
}): ReactNode {
  // truthy 체크
  const isTruthy = Boolean(when);

  // falsy면 fallback 렌더링
  if (!isTruthy) {
    return typeof fallback === 'function' ? fallback() : fallback;
  }

  // truthy면 children 렌더링
  if (typeof children === 'function') {
    return children(when as NonNullable<T>);
  }

  return <>{children}</>;
}

const fruit = 'apple';

// 결과: 사과
<Show when={fruit === 'apple'}>
  <span>사과</span>
</Show>;

const fruit: string | null = 'apple'

// 결과: apple
// typeof result === 'string'
<Show when={fruit} >
	{ result => <span>{result}</span>}
</Show>

const fruit = 'apple'

// 결과: 과일이 없어요
<Show when={false} fallback={<span>과일이 없어요</span>}>
	<span>{fruit}</span>
</Show>