"use client";

import React from "react";
import { Bell } from "lucide-react";
import { useRouter } from "next/navigation";
import { FiMenu } from "react-icons/fi";
import { useAuth } from "../context/AuthContext";

interface HeaderProps {
  toggleSidebar: () => void;
}

const Header: React.FC<HeaderProps> = ({ toggleSidebar }) => {
  const router = useRouter();
  const { user } = useAuth();

  return (
    <header className="bg-white shadow-sm border-b sticky top-0 ">
      <div className="flex items-center justify-between px-4 sm:px-6 lg:px-8 py-4">
        {/* Left side: Menu button on mobile + User name */}
        <div className="flex items-center gap-3">
          {/* Mobile menu toggle */}
          <button
            onClick={toggleSidebar}
            className="lg:hidden p-2 rounded-md border border-gray-200 text-gray-600 hover:bg-gray-100"
          >
            <FiMenu size={20} />
          </button>

          <div>
            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">
              {user?.firstName && user?.lastName
                ? `${user.firstName} ${user.lastName}`
                : "Guest User"}
            </h1>
            <p className="text-gray-500 text-sm hidden sm:block">
              Welcome back to SUBA 👋
            </p>
          </div>
        </div>

        {/* Right side: Search + Profile */}
        <div className="flex items-center space-x-2 sm:space-x-4">
          {/* <div className="relative hidden sm:block ">
            <Search
              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
              size={20}
            />
            <input
              type="text"
              placeholder="Search"
              className="pl-10 pr-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:border-purple-500 w-64 lg:w-80"
            />
          </div> */}

          {/* Mobile search icon */}
          {/* <button className="sm:hidden p-2 text-gray-400 hover:text-gray-500">
            <Search size={20} />
          </button> */}

          <button className="p-2 rounded-full hover:bg-gray-100">
            <Bell size={24} className="text-gray-600" />
          </button>
        </div>
      </div>
    </header>
  );
};

export default Header;