import React, { forwardRef } from 'react'
import PropTypes from 'prop-types'

import { getCopy } from '@tds/util-helpers'

import { userAddBoldCopyDictionary } from './navButtonText'

import NavButtonInteractiveIcon, { StyledInteractiveIconSVG } from '../../NavButton'

const UserAddBold = forwardRef(({ copy, ...props }, ref) => (
  <NavButtonInteractiveIcon
    {...props}
    ref={ref}
    a11yText={getCopy(userAddBoldCopyDictionary, copy).a11yText}
    copy={copy} // Passed in to satisfy styleguidist workaround
  >
    <StyledInteractiveIconSVG width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M18.205 14C20.849 14 23 16.085 23 18.647c0 2.562-2.15 4.647-4.795 4.647-2.644 0-4.795-2.085-4.795-4.647 0-2.562 2.151-4.647 4.795-4.647zm0 1.72c-1.68 0-3.047 1.313-3.047 2.927s1.366 2.927 3.047 2.927c1.68 0 3.048-1.313 3.048-2.927s-1.368-2.927-3.048-2.927zm0 .782c.42 0 .768.311.82.713l.006.102v.515h.552a.82.82 0 01.825.815.819.819 0 01-.722.807l-.103.007h-.552v.516c0 .449-.371.814-.827.814a.823.823 0 01-.818-.712l-.007-.102v-.516h-.55a.821.821 0 01-.827-.814.82.82 0 01.723-.808l.103-.007h.551v-.515c0-.45.37-.815.825-.815zM10.038 1c1.072 0 1.609.231 2.13.662 1.73.012 2.636 1.561 2.69 4.605l.003.3c0 2.992 1.033 3.9 1.043 3.909.243.184.38.484.356.795a.925.925 0 01-.474.738l-.16.069c-.44.178-1.715.64-3.248.899a.965.965 0 01-.732-.16.89.89 0 01-.371-.594.966.966 0 01.751-1.074c.742-.1 1.331-.237 1.777-.368-.42-.787-.81-2.015-.851-3.879l-.004-.335c0-2.149-.444-2.981-.764-3.042l-.037-.004h-.352a.973.973 0 01-.665-.26l-.164-.15c-.242-.215-.374-.251-.928-.251-.255 0-.993.17-1.644.695-.838.678-1.263 1.691-1.263 3.012 0 2.054-.413 3.382-.858 4.216.44.129 1.019.263 1.734.356a.967.967 0 01.658.391.91.91 0 01.164.646l-.021.114-.302 1.132a.938.938 0 01-.588.638l-.112.034-2.898.682c-.765.181-1.387.661-1.722 1.296l-.078.162h2.053c.527 0 .957.418.957.931a.924.924 0 01-.833.924l-.111.006H1.956a.977.977 0 01-.663-.259.925.925 0 01-.293-.67c0-1.923 1.325-3.597 3.249-4.141l.208-.054 1.472-.348c-1.092-.296-1.644-.617-1.65-.62a.916.916 0 01-.168-1.476l.105-.087c.108-.11.94-1.032.997-3.593l.003-.28C5.216 2.4 8.53 1 10.04 1zm8.45 0c1.45 0 2.514.472 3.16 1.404.67.96.674 1.932.017 2.69l-.122.132-.1.097-.034.635a1.561 1.561 0 01.66 1.32l-.012.15-.175 1.325a1.587 1.587 0 01-.832 1.187 5.361 5.361 0 01-1.462 2.555.91.91 0 01-.711.32c-.204 0-.414-.061-.594-.193a.914.914 0 01-.371-.63.941.941 0 01.133-.615l.076-.105.054-.057c.607-.535 1.009-1.31 1.074-2.073a.929.929 0 01.653-.809l.11-.028.113-.852a.93.93 0 01-.659-.806l-.002-.127.086-1.657a.898.898 0 01.208-.533l.082-.087.35-.331c.05-.05.117-.119-.127-.47-.268-.387-.798-.584-1.574-.584-.655 0-1.352.06-1.999.493a.982.982 0 01-1.315-.218.906.906 0 01-.172-.698.933.933 0 01.402-.615C16.632 1 17.933 1 18.489 1z"
        fillRule="evenodd"
      />
    </StyledInteractiveIconSVG>
  </NavButtonInteractiveIcon>
))

UserAddBold.propTypes = {
  copy: PropTypes.oneOfType([
    PropTypes.oneOf(['en', 'fr']),
    PropTypes.shape({
      a11yText: PropTypes.string.isRequired,
    }),
  ]).isRequired,
}

UserAddBold.displayName = 'UserAddBold'

export default UserAddBold