import Translate, { translate } from '@docusaurus/Translate';
import useBaseUrl from '@docusaurus/useBaseUrl';
import React from 'react';

import Command from './Command';
import Divider from './Divider';
import styles from './PackageManagers.module.scss';

const PackageManagers = (): React.ReactElement => (
  <section className={styles.packageManagers}>
    <div className={styles['packageManagers--wrap']}>
      <div className={styles['packageManagers--images']}>
        <a href="https://www.npmjs.com/">
          <img
            loading="lazy"
            alt="Npm logo"
            className={styles['packageManagers--logo']}
            src={useBaseUrl('/img/sponsors/npm.png')}
          />
        </a>
        <a href="https://yarnpkg.com/">
          <img
            loading="lazy"
            alt="Yarn logo"
            className={styles['packageManagers--logo']}
            src={useBaseUrl('/img/sponsors/yarn.png')}
          />
        </a>
        <a href="https://pnpm.io/">
          <img
            loading="lazy"
            alt="Pnpm logo"
            className={styles['packageManagers--logo']}
            src={useBaseUrl('/img/sponsors/pnpm.svg')}
          />
        </a>
      </div>
      <h2>
        <Translate>Popular npm clients are supported</Translate>
      </h2>
      <Divider spacer={1} />
      <p>
        <Translate
          values={{
            npm: <b>npm</b>,
            yarn: <b>yarn</b>,
            pnpm: <b>pnpm</b>,
          }}
        >
          {
            'Package managers such as {npm}, {yarn}, and {pnpm} are part of any development workflow.'
          }
        </Translate>
      </p>
    </div>
    <div className={styles['packageManagers--wrap']}>
      <div className={styles['packageManagers--commands']}>
        <Command
          alt="Docker usage of Verdaccio"
          image={useBaseUrl('/img/sponsors/docker.png')}
          command={translate({ message: 'docker pull verdaccio/verdaccio' })}
        />
        <Command
          alt="Verdaccio install inside Kubernetes Helm"
          image={useBaseUrl('/img/sponsors/k8s.png')}
          command={translate({ message: 'helm install verdaccio/verdaccio' })}
        />
      </div>
      <h2>
        <Translate>Making the DevOps work easy</Translate>
      </h2>
      <Divider spacer={1} />
      <p>
        <Translate
          values={{
            docker: <b>Docker</b>,
            helm: <b>Kubernetes Helm</b>,
          }}
        >
          {
            'We have an official {docker} image ready to use and {helm} support for easy deployment.'
          }
        </Translate>
      </p>
    </div>
  </section>
);

export default PackageManagers;