SweetHome/app/components/BottomNav.js

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, Building, Calendar, Settings, CreditCard, Briefcase } from "lucide-react";
import React, { useEffect, useState } from "react";

export default function BottomNav({ isOwner, isOwnerOrAgent }) {
  const pathname = usePathname();
  const [isMounted, setIsMounted] = useState(false);
  const bookingsHref = isOwner ? "/owner/reservations" : "/reservations";

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const items = [
    { href: "/", label: "الرئيسية", icon: Home },
    { href: "/properties", label: "عقاراتنا", icon: Building },
    ...(isOwnerOrAgent ? [{ href: "/owner/properties", label: "عقاراتي", icon: Briefcase }] : []),
    { href: bookingsHref, label: "الحجوزات", icon: Calendar },
    { href: "/payments", label: "المدفوعات", icon: CreditCard },
    { href: "/settings", label: "الإعدادات", icon: Settings },
  ];

  const isActive = (href) => {
    if (href === "/") return pathname === "/";
    return pathname.startsWith(href);
  };

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center pb-4 pt-2 pointer-events-none">
      <nav className="bg-gray-50 rounded-3xl px-4 py-2 shadow-[0_4px_24px_rgba(251,146,60,0.25)] pointer-events-auto">
        <div className="flex items-center justify-center gap-1">
          {items.map((it) => {
            const Icon = it.icon;
            const active = isActive(it.href);
            return (
              <Link
                key={it.href}
                href={it.href}
                className={`relative flex flex-col items-center justify-center px-3 py-2 rounded-xl transition-all duration-200 ease-out hover:shadow-md hover:bg-white/80 ${active ? "bg-white shadow-sm text-amber-600" : "text-gray-700 hover:text-amber-600"}`}
              >
                <div className="relative">
                  <Icon className="w-6 h-6" />
                  {it.badge > 0 && (
                    <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
                      {it.badge > 9 ? "9+" : it.badge}
                    </div>
                  )}
                </div>
                <div className="mt-1 text-xs text-center" aria-hidden>
                  {it.label}
                </div>
              </Link>
            );
          })}
        </div>
      </nav>
    </div>
  );
}