import { showModal } from '../globalState'
import styles from './CreditsBookButton.module.css'

export default () => {
  const handleClick = () => {
    showModal({ reactType: 'credits-about' })
  }

  return (
    <button
      className={styles.creditsButton}
      onClick={handleClick}
      aria-label="Credits"
      title="Credits"
    >
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15.4375 15.1238L15.625 15.3113V16.8113L15.4375 16.9988H14.6875L14.5 16.8113V16.4363L14.3125 16.2488H12.8125L12.625 16.0613V15.3113L12.4375 15.1238H10.9375L10.75 14.9363V14.1863L10.5625 13.9988H7.9375L7.75 14.1863V14.9363L7.5625 15.1238H6.0625L5.875 15.3113V16.0613L5.6875 16.2488H4.1875L4 16.4363V16.8113L3.8125 16.9988H3.0625L2.875 16.8113V15.3113L3.0625 15.1238H3.4375L3.625 14.9363V13.8113L3.8125 13.6238H4.1875L4.375 13.4363V11.9363L4.5625 11.7488H4.9375L5.125 11.5613V10.0613L4.9375 9.87384H4.1875L4 9.68634V8.93634L3.8125 8.74884H2.6875L2.5 8.56134V7.81134L2.3125 7.62384H1.1875L1 7.43634V6.68634L1.1875 6.49884H6.63738L6.82488 6.31134V5.61543V4.60586L7.01238 4.41836H7.5625L7.75 4.23086V2.6875L7.9375 2.5H8.43022L8.61772 2.3125V1.1875L8.80522 1H9.66735L9.85485 1.1875V2.3125L10.0424 2.5H10.5625L10.75 2.6875V4.23086L10.9375 4.41836H11.4375L11.625 4.60586V6.31134L11.8125 6.49884H17.3125L17.5 6.68634V7.43634L17.3125 7.62384H16.1875L16 7.81134V8.56134L15.8125 8.74884H14.6875L14.5 8.93634V9.68634L14.3125 9.87384H13.5625L13.375 10.0613V11.5613L13.5625 11.7488H13.9375L14.125 11.9363V13.4363L14.3125 13.6238H14.6875L14.875 13.8113V14.9363L15.0625 15.1238H15.4375Z" fill="#FFD700" />
      </svg>

    </button>
  )
}