import React from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { LayoutDashboard, ReceiptText, Package, Users, MoreHorizontal } from 'lucide-react';
import { __ } from '@/lib/i18n';

interface BottomNavItem {
  to: string;
  icon: React.ReactNode;
  label: string;
  startsWith?: string;
}

const navItems: BottomNavItem[] = [
  {
    to: '/dashboard',
    icon: <LayoutDashboard className="w-5 h-5" />,
    label: __('Dashboard'),
    startsWith: '/dashboard'
  },
  {
    to: '/orders',
    icon: <ReceiptText className="w-5 h-5" />,
    label: __('Orders'),
    startsWith: '/orders'
  },
  {
    to: '/products',
    icon: <Package className="w-5 h-5" />,
    label: __('Products'),
    startsWith: '/products'
  },
  {
    to: '/customers',
    icon: <Users className="w-5 h-5" />,
    label: __('Customers'),
    startsWith: '/customers'
  },
  {
    to: '/more',
    icon: <MoreHorizontal className="w-5 h-5" />,
    label: __('More'),
    startsWith: '/more'
  }
];

export function BottomNav() {
  const location = useLocation();

  const isActive = (item: BottomNavItem) => {
    if (item.startsWith) {
      return location.pathname.startsWith(item.startsWith);
    }
    return location.pathname === item.to;
  };

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-background border-t border-border safe-area-inset-bottom md:hidden">
      <div className="flex items-center justify-around h-14">
        {navItems.map((item) => {
          const active = isActive(item);
          
          return (
            <NavLink
              key={item.to}
              to={item.to}
              className={`flex flex-col items-center justify-center flex-1 h-full gap-0.5 transition-colors focus:outline-none focus:shadow-none focus-visible:outline-none ${
                active
                  ? 'text-primary'
                  : 'text-muted-foreground hover:text-foreground'
              }`}
            >
              {item.icon}
              <span className="text-[10px] font-medium leading-none">
                {item.label}
              </span>
            </NavLink>
          );
        })}
      </div>
    </nav>
  );
}