'use client'

import { LucideIcon } from 'lucide-react'
import { ReactNode } from 'react'

import { Button } from '@/components/ui/button'

interface NavigationButtonProps {
  isActive: boolean
  isCollapsed: boolean
  label: string
  icon: LucideIcon
  onClick: () => void
  notification?: ReactNode
}

export function NavigationButton({ 
  isActive, 
  isCollapsed, 
  label, 
  icon: Icon, 
  onClick,
  notification,
}: NavigationButtonProps) {
  return (
    <Button
      variant={isActive ? 'secondary' : 'ghost'}
      className={`w-full ${
        isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'
      } text-left transition-all duration-200 text-xs relative ${
        isActive
          ? 'bg-white/20 text-white hover:bg-white/30'
          : 'text-white/80 hover:bg-white/10 hover:text-white'
      } cursor-pointer`}
      onClick={onClick}
      title={isCollapsed ? label : ''}
    >
      <Icon className="h-4 w-4 flex-shrink-0" />
      {!isCollapsed && <span className="ml-3">{label}</span>}
      {notification}
    </Button>
  )
}