import { useI18n } from 'domains/i18n/hooks'
import { className } from 'lib/css'
import { useRef } from 'preact/hooks'
import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
import Icon from './icon'

const Header = ({ children, onCloseChat }) => {
  const { headerCollapseButtonId } = useSeamlyStateContext()
  const closeButton = useRef(null)

  const { t } = useI18n()
  return (
    <header className={className('chat__header')}>
      {children}
      <div className={className('header-controls')}>
        <button
          type="button"
          className={className('button', 'header-controls__collapse')}
          onClick={onCloseChat}
          ref={closeButton}
          id={headerCollapseButtonId}
        >
          <Icon name="chevronDown" size="32" alt={t('header.collapseApp')} />
        </button>
      </div>
    </header>
  )
}

export default Header