import React, { FC } from 'react'
import SearchBar from './SeachBar'

export type HeaderProps = {
  title?: string
  buttons?: Array<JSX.Element>
  search?:boolean ;
  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
  onChange?:React.ChangeEventHandler<HTMLInputElement> | undefined
}
const Header: FC<HeaderProps> = ({ search, title, buttons, onClick, onChange}) => {
  return (
    <div className='header'>
      <h2 className={"c-title fz-20"} style={{margin:"0"}} >{title}</h2>      

      <div className='header__buttons'>
      {search && <SearchBar onClick={onClick} onChange={onChange} />}
        {buttons}
      </div>
    </div>
  )
}

export default Header
