+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+
+const CanonicalLinks = ({ base, lang, langs }) => {
+ const { i18n } = useTranslation();
+
+ const activeLang = lang || i18n.language;
+ const availableLangs = langs || ['de', 'en'];
+
+ return <Helmet>
+ <link
+ href={`https://alttp.localhorst.tv${base}?lng=${activeLang}`}
+ hrefLang={activeLang}
+ rel="canonical"
+ />
+ <link
+ href={`https://alttp.localhorst.tv${base}`}
+ hrefLang="x-default"
+ rel="alternate"
+ />
+ {availableLangs.filter(l => l !== activeLang).map(l =>
+ <link
+ key={l}
+ href={`https://alttp.localhorst.tv${base}?lng=${l}`}
+ hrefLang={l}
+ rel="alternate"
+ />
+ )}
+ </Helmet>;
+};
+
+CanonicalLinks.propTypes = {
+ base: PropTypes.string.isRequired,
+ lang: PropTypes.string,
+ langs: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default CanonicalLinks;