import React, {ReactNode} from 'react'
import './index.less'

type Props = {
  left?: string | ReactNode
  right?: string | ReactNode
  children: ReactNode
  onLeftClick?(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void
  onRightClick?(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void
}

const Header: React.FC<Props> = (props: Props) => {
  const {children, left, right} = props
  return (
    <div className="component-header">
      <div
        className="header-left"
        onClick={e => {
          if (left) {
            props?.onLeftClick?.(e)
          }
        }}>
        {left}
      </div>
      <div className="header-title">{children}</div>
      <div
        className="header-right"
        onClick={e => {
          if (right) {
            props?.onRightClick?.(e)
          }
        }}>
        {right}
      </div>
    </div>
  )
}

export default Header