import { Link } from "react-router-dom";
import { Menu, LogOut, Home } from "lucide-react";
import { Button } from "@/components/ui/button";

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

export const MobileHeader = ({ onMenuClick }: MobileHeaderProps) => {
  return (
    <header className="bg-white border-b border-gray-200 px-3 py-2 flex items-center justify-between">
      {/* Left - Home */}
      <Link to="/" className="flex items-center">
        <Home className="w-5 h-5 text-gray-700" />
        <span className="ml-1 text-sm font-medium text-gray-700">Home</span>
      </Link>

      {/* Center - Logo */}
      <div className="flex items-center">
        <div className="flex items-center">
          <div className="w-5 h-5 mr-1 relative">
            <svg viewBox="0 0 24 24" className="w-full h-full text-red-600 fill-current">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
          </div>
          <div className="flex flex-col">
            <div className="flex items-center">
              <span className="text-base font-bold text-blue-800 mr-0.5">USA</span>
              <span className="text-xs text-gray-600">FUNDING</span>
            </div>
            <span className="text-[10px] text-red-600 font-medium -mt-0.5">Applications</span>
          </div>
        </div>
      </div>

      {/* Right - Logout */}
      <Link to="/logout" className="flex items-center">
        <LogOut className="w-5 h-5 text-gray-700" />
        <span className="ml-1 text-sm font-medium text-gray-700">Logout</span>
      </Link>
    </header>
  );
};