import { NavLink } from "react-router-dom"
import { Home, ListChecks, CheckSquare, BarChart3, Settings } from "lucide-react"
import clsx from "clsx"

export default function Navigation() {
  const navItems = [
    { to: "/", icon: Home, label: "Сегодня" },
    { to: "/habits", icon: ListChecks, label: "Привычки" },
    { to: "/tasks", icon: CheckSquare, label: "Задачи" },
    { to: "/stats", icon: BarChart3, label: "Статистика" },
    { to: "/settings", icon: Settings, label: "Настройки" },
  ]

  return (
    <nav className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-100 z-50">
      <div className="max-w-lg mx-auto px-4">
        <div className="flex items-center justify-around py-2">
          {navItems.map(({ to, icon: Icon, label }) => (
            <NavLink
              key={to}
              to={to}
              className={({ isActive }) =>
                clsx(
                  "flex flex-col items-center gap-1 px-2 py-2 rounded-xl transition-all",
                  isActive
                    ? "text-primary-600 bg-primary-50"
                    : "text-gray-400 hover:text-gray-600"
                )
              }
            >
              <Icon size={20} />
              <span className="text-xs font-medium">{label}</span>
            </NavLink>
          ))}
        </div>
      </div>
    </nav>
  )
}