'use client';

import { Menu } from 'lucide-react';

interface MobileHeaderProps {
  onMenuClick: () => void;
}

export function MobileHeader({ onMenuClick }: MobileHeaderProps) {
  return (
    <header className="fixed top-0 left-0 right-0 z-30 flex h-14 items-center gap-3 border-b border-sidebar-text/10 bg-sidebar-bg px-4 md:hidden">
      <button
        onClick={onMenuClick}
        className="rounded-lg p-2 text-sidebar-text hover:bg-sidebar-active/10"
        aria-label="Открыть меню"
      >
        <Menu className="h-5 w-5" />
      </button>
      <h1 className="text-lg font-bold text-sidebar-text">
        My<span className="text-primary">Fit</span>CRM
      </h1>
    </header>
  );
}
