'use client';

import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/auth-store';
import { LogOut, User } from 'lucide-react';

export default function Topbar() {
  const router = useRouter();
  const { user, logout } = useAuthStore();

  const handleLogout = () => {
    logout();
    router.push('/login');
  };

  const fullName = user ? `${user.firstName ?? ''} ${user.lastName ?? ''}`.trim() : 'Admin';

  return (
    <header className="h-14 border-b flex items-center justify-between px-6"
      style={{ backgroundColor: '#fff', borderColor: '#E2E8F0' }}>
      <div />
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-2 text-sm text-slate-600">
          <User size={16} />
          <span>{fullName}</span>
          {user?.roles?.[0] && (
            <span className="text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full">
              {user.roles[0]}
            </span>
          )}
        </div>
        <button onClick={handleLogout}
          className="flex items-center gap-1.5 text-sm text-slate-500 hover:text-red-500 px-2 py-1.5 rounded-lg hover:bg-red-50 transition-colors">
          <LogOut size={15} />
          Logout
        </button>
      </div>
    </header>
  );
}