import React from "react";
import { Home, ShoppingBag, ShoppingCart, Heart, User } from "lucide-react";
import { Link, useLocation } from "react-router-dom";
import styles from "./FooterBar.module.scss";
import { useCart } from "../../app/api/useCart";
import { useGetFavoritesQuery } from "../../app/api/favoritesApi";
import { useTranslation } from "react-i18next";

const FooterBar = () => {
  const location = useLocation();
  const { t } = useTranslation();
  const { cartCount } = useCart();
  const { data: favoriteData } = useGetFavoritesQuery();

  const favoriteCount = favoriteData?.length || 0;

  const navItems = [
    { id: 1, icon: <Home />, label: t("navbar.home"), count: 0, path: "/" },
    {
      id: 2,
      icon: <ShoppingBag />,
      label: t("navbar.brands"),
      count: 0,
      path: "/brands",
    },
    {
      id: 3,
      icon: <ShoppingCart />,
      label: t("navbar.cart"),
      count: cartCount,
      path: "/cart",
    },
    {
      id: 4,
      icon: <Heart />,
      label: t("wishtList.likedProducts"),
      count: favoriteCount,
      path: "/wishlist",
    },
    {
      id: 5,
      icon: <User />,
      label: t("profile.profile"),
      count: 0,
      path: "/profile",
    },
  ];

  return (
    <footer className={styles.navbar}>
      <div className={styles.container}>
        <div className={styles.navItems}>
          {navItems.map((item) => (
            <Link
              key={item.id}
              to={item.path}
              className={`${styles.navItem} ${
                location.pathname === item.path ? styles.active : ""
              }`}
            >
              <div className={styles.iconWrapper}>
                <div className={styles.icon}>{item.icon}</div>
                {item.count > 0 && (
                  <div className={styles.badge}>{item.count}</div>
                )}
              </div>
              <span className={styles.label}>{item.label}</span>
            </Link>
          ))}
        </div>
      </div>
    </footer>
  );
};

export default FooterBar;