"use client"

import type React from "react"

import { usePathname, useRouter } from "next/navigation"
import { MessageCircle, Phone, Users, Grid3X3, ShoppingBag, Megaphone } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

interface NavItem {
  id: string
  label: string
  icon: React.ReactNode
  href: string
  badge?: number
}

const navItems: NavItem[] = [
  {
    id: "dashboard",
    label: "Dashboard",
    icon: <Grid3X3 className="h-5 w-5" />,
    href: "/dashboard",
  },
  {
    id: "messages",
    label: "Messages",
    icon: <MessageCircle className="h-5 w-5" />,
    href: "/chat",
    badge: 3,
  },
  {
    id: "ads",
    label: "Ads",
    icon: <Megaphone className="h-5 w-5" />,
    href: "/ads",
  },
  {
    id: "marketplace",
    label: "Market",
    icon: <ShoppingBag className="h-5 w-5" />,
    href: "/marketplace",
  },
  {
    id: "calls",
    label: "Calls",
    icon: <Phone className="h-5 w-5" />,
    href: "/calls",
    badge: 1,
  },
  {
    id: "contacts",
    label: "Contacts",
    icon: <Users className="h-5 w-5" />,
    href: "/contacts",
  },
]

export function BottomNav() {
  const pathname = usePathname()
  const router = useRouter()

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

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-card border-t border-border p-2 safe-area-pb">
      <div className="flex items-center justify-around">
        {navItems.map((item) => (
          <Button
            key={item.id}
            variant={isActive(item.href) ? "default" : "ghost"}
            size="sm"
            className="flex-col h-auto py-2 px-3 relative"
            onClick={() => router.push(item.href)}
          >
            <div className="relative">
              {item.icon}
              {item.badge && item.badge > 0 && (
                <Badge className="absolute -top-2 -right-2 h-4 w-4 p-0 flex items-center justify-center text-xs">
                  {item.badge}
                </Badge>
              )}
            </div>
            <span className="text-xs mt-1">{item.label}</span>
          </Button>
        ))}
      </div>
    </div>
  )
}