SweetHome/app/components/BottomNav.js

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, Building2, Building, CalendarCheck, CalendarDays, ClipboardList, CreditCard, BookOpenCheck } from "lucide-react";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { label } from "framer-motion/client";

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

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

  const items = [
    { href: "/", label: t("home"), icon: Home },
    { href: "/properties", label: t("ourProperties"), icon: Building2 },

    ...(isOwnerOrAgent
      ? [
          { href: "/owner/properties", label: t("myProperties"), icon: Building },
          { href: "/owner/bookings", label: t("Myseizedproperties"), icon: CalendarCheck },
          { href: "/reservations", label: t("Mybookings"), icon: CalendarDays },
        ]
      : [{ href: "/booked-properties", label: t("Mybookings"), icon: CalendarDays }]),

    { href: bookingsHref, label: t("Orders"), icon: ClipboardList },
    { href: "/payments", label: t("payments"), icon: CreditCard },

    ...(isOwnerOrAgent ? [{ href: "/owner/account-book", label: t("accountBook"), icon: BookOpenCheck }] : []),
  ];

  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 px-5 pb-4 pt-4 pointer-events-none">
      <nav
        className="
      w-fit max-w-full
      rounded-3xl
      bg-gray-50
      px-5 py-3 sm:px-4
      shadow-[0_4px_24px_rgba(251,146,60,0.25)]
      pointer-events-auto
    "
      >
        <div className="flex  items-center justify-center  gap-0.5 sm:gap-1   overflow-hidden ">
          {items.map((it) => {
            const Icon = it.icon;
            const active = isActive(it.href);

            return (
              <Link
                key={it.href}
                href={it.href}
                style={{ padding: "3px", width: "115px" }}
                className={`
              flex
              flex-col
              items-center
              justify-center
              rounded-xl
              transition-all
              duration-200
              ease-out
              ${active ? "bg-white shadow-sm text-amber-600" : "text-gray-700 hover:bg-white/80 hover:text-amber-600 hover:shadow-md"}
            `}
              >
                <div className="relative">
                  <Icon className="h-5 w-5 sm:h-6 sm:w-6" />

                  {it.badge > 0 && (
                    <div
                      className="
                  absolute -right-2 -top-2
                  flex h-6 w-7 sm:h-5 sm:w-5
                  items-center justify-center
                  rounded-full
                  bg-red-500
                  text-[9px] sm:text-xs
                  font-bold
                  text-white
                "
                    >
                      {it.badge > 9 ? "9+" : it.badge}
                    </div>
                  )}
                </div>

                <div className="mt-0.5 text-[10px] sm:mt-1 text-center sm:text-xs">{it.label}</div>
              </Link>
            );
          })}
        </div>
      </nav>
    </div>
  );
}