import Link from "next/link"
import type { LucideIcon } from "lucide-react"
import type React from "react"

interface NavItemProps {
  href: string
  icon: LucideIcon
  children: React.ReactNode
  onClick?: () => void
}

export const NavItem: React.FC<NavItemProps> = ({ href, icon: Icon, children, onClick }) => (
  <Link
    href={href}
    onClick={onClick}
    className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
  >
    <Icon className="h-4 w-4 mr-3 flex-shrink-0" />
    {children}
  </Link>
)