import React from 'react';

import { usePresentation } from '../presentation/PresentationContext';
import { headerChromeClass } from '../presentation/headerChrome';

type HeaderProps = {
  left?: React.ReactNode;
  center?: React.ReactNode;
  right?: React.ReactNode;
  subnavbar?: React.ReactNode;
  className?: string;
};

const Header = ({ left, center, right, subnavbar, className = '' }: HeaderProps) => {
  const { id } = usePresentation();

  return (
    <div
      className={`shrink-0 flex flex-col bg-[var(--tg-bg)]
        border-b border-[var(--tg-divider)] z-10 ${headerChromeClass[id]} ${className}`}
    >
      <div className="flex items-center h-14 px-2 gap-2">
        <div className="flex items-center shrink-0">{left}</div>
        <div className="flex-1 min-w-0 flex items-center">{center}</div>
        <div className="flex items-center shrink-0 gap-1">{right}</div>
      </div>
      {subnavbar && <div className="px-3 pb-3">{subnavbar}</div>}
    </div>
  );
};

export default Header;
