'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useOutletAuthStore } from '@/store/outlet-auth';
import outletApi from '@/lib/outlet-axios';
import toast from 'react-hot-toast';

export default function OutletNavbar() {
  const router = useRouter();
  const { outlet, clearAuth } = useOutletAuthStore();

  const logout = async () => {
    try { await outletApi.post('/outlet/logout'); } catch {}
    clearAuth();
    toast.success('Berhasil keluar');
    router.push('/outlet/login');
  };

  return (
    <nav className="bg-white shadow-sm sticky top-0 z-10">
      <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
        <Link href="/outlet/dashboard" className="text-xl font-bold text-blue-700">BMU Outlet</Link>
        <div className="flex items-center gap-4">
          <span className="text-sm text-gray-600 hidden sm:block">{outlet?.outlet_name}</span>
          <Link href="/outlet/dashboard" className="text-sm text-gray-600 hover:text-blue-700">Dashboard</Link>
          <Link href="/outlet/reports" className="text-sm text-gray-600 hover:text-blue-700">Laporan</Link>
          <Link href="/outlet/profile" className="text-sm text-gray-600 hover:text-blue-700">Profil</Link>
          <button onClick={logout} className="text-sm text-red-500 hover:text-red-700">Keluar</button>
        </div>
      </div>
    </nav>
  );
}