import React, { FC } from 'react'
import journey from '../../assets/img/illustration-journey.png'
import { useI18n } from '@wordpress/react-i18n'
// @ts-expect-error 7016
import { getAdminLink } from '@woocommerce/settings'


const Guide: FC = () => {
  const { __ } = useI18n()
  return (
    <div className="flex flex-dir-col align-ifs mtl mls guide-container guide-text-alignment">
      <div className="flex align-ic mbm">
        <div className="circle circle-color1 mrm flex justify-cc align-ic">
          1
        </div>
        <div>
          <p className="ma0">
            <strong>
              {__('Set up your webshop in', 'posten-bring-checkout')}{' '}
              <a
                href="https://www.mybring.com/checkout"
                target="_blank"
                rel="noreferrer"
              >
                {__("Mybring's Checkout area", 'posten-bring-checkout')}
              </a>{' '}
              {__('as an admin user', 'posten-bring-checkout')}
            </strong>
          </p>
          <p className="ma0">
            {__('You need', 'posten-bring-checkout')}{' '}
            <a
              href={__(
                'https://www.bring.com/resources/mybring/grant-and-change-user-access',
                'posten-bring-checkout'
              )}
              target="_blank"
              rel="noreferrer"
              className="ma0"
            >
              {__('admin access', 'posten-bring-checkout')}
            </a>
          </p>
        </div>
      </div>
      <div className="flex align-ic mbm">
        <div className="mrm flex justify-cc align-ic circle circle-color2">
          2
        </div>
        <div>
          <p className="ma0">
            <strong>
              {__('Activate Posten Bring Checkout', 'posten-bring-checkout')}{' '}
            </strong>
          </p>
          <p className="ma0">
            {__('Add your Mybring API key in the ', 'posten-bring-checkout')}
            <a
              href={getAdminLink(
                'admin.php?page=wc-admin&path=%2Fposten-bring-checkout%2Fsettings'
              )}
              rel="noreferrer"
              className="ma0"
            >
              {__('WooCommerce settings', 'posten-bring-checkout')}
            </a>
          </p>
        </div>
      </div>
      <div className="flex align-ic mbm">
        <div className="circle circle-color3 mrm flex justify-cc align-ic">
          3
        </div>
        <div>
          <p className="ma0">
            <strong>
              {__('Your checkout is ready!', 'posten-bring-checkout')}{' '}
            </strong>
          </p>
        </div>
      </div>
      <div className="journey">
        <img className="journey-image" src={journey} alt={'journey'} />
      </div>
    </div>
  )
}

export default Guide