import Image from "next/image";
import { TbMenu2 } from "react-icons/tb";

import HFLogo from "assets/hf-logo.svg";

export const EditorHeader = ({
  onToggleMenu,
}: {
  onToggleMenu: () => void;
}) => {
  return (
    <header className="px-4 xl:px-6 py-2.5 border border-slate-950 bg-slate-950 flex justify-between items-center">
      <div className="w-5 h-5 block xl:hidden" onClick={onToggleMenu}>
        <TbMenu2 className="w-full h-full text-slate-100" />
      </div>
      <Image src={HFLogo} alt="Hugging Face Logo" width={34} height={34} />
      <p className="text-gray-300 font-code text-sm font-semibold">
        Hub API Playground
      </p>
      <div className="hidden xl:flex items-center justify-end gap-3">
        <div className="bg-teal-600 w-3 h-3 rounded-full" />
        <div className="bg-indigo-600 w-3 h-3 rounded-full" />
        <div className="bg-purple-500 w-3 h-3 rounded-full" />
      </div>
    </header>
  );
};