
import { useEffect, useState } from 'react';

interface TopBarProps {
  search: string;
  onSearch: (value: string) => void;
  enableSearch?: boolean;
  operatorName?: string;
  onLoginClick?: () => void;
  onLogout?: () => void;
}

export const TopBar = ({ operatorName, onLoginClick, onLogout }: TopBarProps) => {
  const [showMenu, setShowMenu] = useState(false);
  const [displayName, setDisplayName] = useState(operatorName || '');

  useEffect(() => {
    setDisplayName(operatorName || '');
  }, [operatorName]);

  const handleLogout = () => {
    localStorage.clear();
    setDisplayName('');
    setShowMenu(false);
    onLogout?.();
  };

  return (
    <header className='flex items-center gap-3 p-2 border-b bg-white'>
      <div className='flex-1 flex items-center gap-3'>
        {/* {enableSearch ? (
          <div className='w-[420px] max-w-[60vw] h-[36px] flex items-center'>
            <Input
              placeholder='搜索 姓名 / 证件号 / 手机号'
              value={search}
              onChange={(e) => onSearch(e.target.value)}
              className='text-sm'
            />
          </div>
        ) : (
          <div className='text-sm text-gray-500 flex items-center p-[9px] pl-[14px]'>圆和医疗 · 体检驾驶舱</div>
        )} */}
      </div>
      <div className='flex items-center gap-3 text-xs relative'>
        <button
          onClick={() => {
            if (!operatorName) {
              onLoginClick?.();
              return;
            }
            setShowMenu((v) => !v);
          }}
          className='px-3 py-1 rounded-2xl border bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer'
        >
          操作员 · {displayName || '未登录'}
        </button>
        {displayName && showMenu && (
          <div className='absolute right-0 top-[110%] w-32 bg-white border rounded-lg shadow-lg py-2 z-10'>
            <button
              onClick={handleLogout}
              className='w-full text-left px-3 py-2 text-[13px] hover:bg-gray-50'
            >
              退出登录
            </button>
          </div>
        )}
      </div>
    </header>
  );
};


