import { NavLink } from 'react-router-dom'
import { Home, Search, Bell, User } from 'lucide-react'
import './Navigation.css'

export default function Navigation() {
  return (
    <nav className="navigation">
      <NavLink to="/feed" className="nav-item">
        {({ isActive }) => (
          <>
            <Home size={24} strokeWidth={isActive ? 2.5 : 2} />
            <span>Лента</span>
          </>
        )}
      </NavLink>
      
      <NavLink to="/search" className="nav-item">
        {({ isActive }) => (
          <>
            <Search size={24} strokeWidth={isActive ? 2.5 : 2} />
            <span>Поиск</span>
          </>
        )}
      </NavLink>
      
      <NavLink to="/notifications" className="nav-item">
        {({ isActive }) => (
          <>
            <Bell size={24} strokeWidth={isActive ? 2.5 : 2} />
            <span>Уведомления</span>
          </>
        )}
      </NavLink>
      
      <NavLink to="/profile" className="nav-item">
        {({ isActive }) => (
          <>
            <User size={24} strokeWidth={isActive ? 2.5 : 2} />
            <span>Профиль</span>
          </>
        )}
      </NavLink>
    </nav>
  )
}