import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { pipe } from 'ramda';
import { serverType } from '../servers/prop-types';
import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
import { ExternalLink } from 'react-external-link';

const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';

const propTypes = {
  selectedServer: serverType,
  className: PropTypes.string,
  clientVersion: PropTypes.string,
};

const ShlinkVersions = ({ selectedServer, className, clientVersion = SHLINK_WEB_CLIENT_VERSION }) => {
  const { printableVersion: serverVersion } = selectedServer;
  const normalizedClientVersion = pipe(versionToSemVer(), versionToPrintable)(clientVersion);

  return (
    <small className={classNames('text-muted', className)}>
      Client: <ExternalLink href="https://github.com/shlinkio/shlink-web-client/releases/" className="text-muted"><b>{normalizedClientVersion}</b></ExternalLink> - Server: <ExternalLink href="https://github.com/shlinkio/shlink/releases/" className="text-muted"><b>{serverVersion}</b></ExternalLink>
    </small>
  );
};

ShlinkVersions.propTypes = propTypes;

export default ShlinkVersions;

@@ -741,94 +741,48 @@
 n);%0A
-%0A
   
-return (%0A    %3Csmall className=%7BclassNames('text-muted', className)%7D%3E%0A      Client: 
+const linkClientVersion = () =%3E (%3Cdiv%3E
 %3CExt
@@ -857,36 +857,12 @@
 es/%22
- className=%22text-muted%22
 %3E%3Cb%3E
-%7B
 norm
@@ -876,31 +876,29 @@
 lientVersion
-%7D
 %3C/b%3E%3C
-/
 ExternalLink
@@ -902,19 +902,57 @@
 ink%3E
- - Server: 
+%3C/div%3E);%0A  const linkServerVersion = () =%3E (%3Cdiv%3E
 %3CExt
@@ -1016,68 +1016,246 @@
 es/%22
- className=%22text-muted%22%3E%3Cb%3E%7BserverVersion%7D%3C/b%3E%3C/ExternalLink
+%3E%3Cb%3EserverVersion%3C/b%3E%3CExternalLink%3E%3C/div%3E);%0A%0A  return (%0A    %3Csmall className=%7BclassNames('text-muted', className)%7D%3E%0A      Client: %3Cb className=%22text-muted%22%3E%7BlinkClientVersion%7D%3C/b%3E - Server: %3Cb className=%22text-muted%22%3E%7BlinkServerVersion%7D%3C/b
 %3E%0A  

Update ShlinkVersions.js