import React from 'react'

import styles from './IconButton.css'

const SvgButton = ({ children, ...props }) => (
  <button className={styles.svgButton} {...props}>
    {children}
  </button>
)

const AccessLabel = ({ children }) => (
  <span className={styles.a11yLabel}>{children}</span>
)

export const IconButton = ({ Icon, title, ...props }) => {
  return (
    <SvgButton tabIndex="0" title={title} {...props}>
      {Icon && <Icon aria-hidden="true" focusable="false" />}
      <AccessLabel>{title}</AccessLabel>
    </SvgButton>
  )
}
