import React, { useState } from 'react';
import type { Page, User } from '../types';
import { NAV_LINKS } from '../constants';
import { MenuIcon, XIcon, LoginIcon, LogoutIcon } from './Icons';

interface HeaderProps {
  navigateTo: (page: Page) => void;
  currentUser: User | null;
  handleLogout: () => void;
}

const Header: React.FC<HeaderProps> = ({ navigateTo, currentUser, handleLogout }) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <header className="bg-white shadow-md sticky top-0 z-50">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-20">
          <div className="flex-shrink-0">
            <a onClick={() => navigateTo('home')} className="flex items-center space-x-2 cursor-pointer">
              <span className="text-2xl font-bold text-green-600">সব সেবা</span>
              <span className="text-2xl font-light text-gray-700">.শপ</span>
            </a>
          </div>
          <div className="hidden md:block">
            <nav className="flex items-center space-x-6">
              {NAV_LINKS.map((link) => (
                <a
                  key={link.page}
                  onClick={() => navigateTo(link.page)}
                  className="text-gray-600 hover:text-green-600 px-3 py-2 rounded-md text-md font-medium cursor-pointer transition-colors duration-300"
                >
                  {link.name}
                </a>
              ))}
              {currentUser ? (
                 <div className="flex items-center space-x-4">
                    <span className="font-semibold text-gray-700">স্বাগতম, {currentUser.fullName.split(' ')[0]}</span>
                     <a onClick={() => navigateTo('userDashboard')} className="text-gray-600 hover:text-green-600 font-medium cursor-pointer">ড্যাশবোর্ড</a>
                    <button onClick={handleLogout} className="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full transition-all duration-300">
                        <LogoutIcon className="h-5 w-5 mr-2" />
                        লগআউট
                    </button>
                 </div>
              ) : (
                <button onClick={() => navigateTo('userLogin')} className="ml-4 flex items-center justify-center bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition-all duration-300 transform hover:scale-105">
                    <LoginIcon className="h-5 w-5 mr-2" />
                    লগইন / নিবন্ধন
                </button>
              )}
            </nav>
          </div>
          <div className="md:hidden flex items-center">
            <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-500">
              <span className="sr-only">Open main menu</span>
              {isMenuOpen ? (
                <XIcon className="block h-6 w-6" aria-hidden="true" />
              ) : (
                <MenuIcon className="block h-6 w-6" aria-hidden="true" />
              )}
            </button>
          </div>
        </div>
      </div>

      {isMenuOpen && (
        <div className="md:hidden">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            {NAV_LINKS.map((link) => (
              <a
                key={link.page}
                onClick={() => {
                    navigateTo(link.page);
                    setIsMenuOpen(false);
                }}
                className="text-gray-600 hover:text-green-600 hover:bg-green-50 block px-3 py-2 rounded-md text-base font-medium cursor-pointer"
              >
                {link.name}
              </a>
            ))}
            {currentUser ? (
                 <div className="mt-2 space-y-2">
                     <a onClick={() => {navigateTo('userDashboard'); setIsMenuOpen(false);}} className="text-gray-600 hover:text-green-600 hover:bg-green-50 block px-3 py-2 rounded-md text-base font-medium cursor-pointer">ড্যাশবোর্ড</a>
                     <button onClick={() => {handleLogout(); setIsMenuOpen(false);}} className="w-full flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full transition-all duration-300">
                       <LogoutIcon className="h-5 w-5 mr-2" />
                       লগআউট
                      </button>
                 </div>
            ) : (
                <button onClick={() => {navigateTo('userLogin'); setIsMenuOpen(false);}} className="w-full mt-2 flex items-center justify-center bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition-all duration-300">
                   <LoginIcon className="h-5 w-5 mr-2" />
                   লগইন / নিবন্ধন
                </button>
            )}
          </div>
        </div>
      )}
    </header>
  );
};

export default Header;