import React from 'react';
import MobileLanguageSwitcher from './MobileLanguageSwitcher';
import DesktopLanguageSwitcher from './DesktopLanguageSwitcher';
import type { Translations } from '../../../types';

type Props = {|
  postHasParent: boolean,
  humanTranslation: ?string,
  language: string,
  translations: Translations,
  languagePrefix: string,
  slugPrefix: string,
|}

const PostLanguageSwitcher = (
  {
    postHasParent, humanTranslation, language, languagePrefix, translations, slugPrefix,
  }: Props,
) => {
  const showTranslations = Object.values(translations)
    .some((translation) => translation && translation.post_name);

  if (!showTranslations) {
    return <></>;
  }

  return (
    <>
      <DesktopLanguageSwitcher
        postHasParent={postHasParent}
        humanTranslation={humanTranslation}
        language={language}
        translations={translations}
        languagePrefix={languagePrefix}
        slugPrefix={slugPrefix}
      />
      <MobileLanguageSwitcher
        postHasParent={postHasParent}
        humanTranslation={humanTranslation}
        language={language}
        translations={translations}
        languagePrefix={languagePrefix}
        slugPrefix={slugPrefix}
      />
    </>
  );
};


export default PostLanguageSwitcher;