import type { ReactNode } from 'react';

type BooleanCase = 'true' | 'false';

// string
export function Switch<T extends string>(props: {
  value: T | null | undefined;
  cases: Partial<Record<T, ReactNode>>;
  fallback?: ReactNode;
}): ReactNode;

// boolean
export function Switch(props: {
  value: boolean | null | undefined;
  cases: Partial<Record<BooleanCase, ReactNode>>;
  fallback?: ReactNode;
}): ReactNode;

// string | boolean
export function Switch<T extends string>({
  value,
  cases,
  fallback = null,
}: {
  value: T | boolean | null | undefined;
  cases: Record<string, ReactNode>;
  fallback?: ReactNode;
}): ReactNode {
  if (value === null || value === undefined) return fallback;

  if (typeof value === 'boolean') {
    const key = value ? 'true' : 'false';
    const result = cases[key];
    return result ?? fallback;
  }

  const result = cases[value];
  return result ?? fallback;
}

const fruit = 'apple';

// 결과: 사과
<Switch
  value={fruit}
  cases={{
    apple: <span>사과</span>,
    banana: <span>바나나</span>,
    cherry: <span>체리</span>,
  }}
/>;

const isLoggedIn = true;

// 결과: 로그인됨
<Switch
  value={isLoggedIn}
  cases={{
    true: <span>로그인됨</span>,
    false: <span>로그아웃됨</span>,
  }}
/>;

const fruit = 'grape';

// 결과: 과일이 없어요
<Switch
  value={fruit}
  cases={{
    apple: <span>사과</span>,
    banana: <span>바나나</span>,
    cherry: <span>체리</span>,
  }}
  fallback={<span>과일이 없어요</span>}
/>;