import cc from 'classcat';
import './Header.css';

interface HeaderProps {
  className?: string;
  style?: React.CSSProperties;
  title?: React.ReactNode;
  left?: React.ReactNode;
  right?: React.ReactNode;
}

export const Header = ({
  className,
  style,
  title,
  left,
  right,
}: HeaderProps) => {
  return (
    <div
      className={cc(['flexNone paddingX4', className])}
      style={{
        height: 48,
        background: 'rgba(255,255,255,.96)',
        ...style,
      }}
    >
      <div className="h100 flex alignCenter justifyBetween fz16 bold">
        <div className="w100 tal c-gray oh">{left}</div>
        <div className="marginX4 nowrap">{title}</div>
        <div className="w100 tar c-gray oh">{right}</div>
      </div>
    </div>
  );
};