import { NavLink } from 'react-router-dom'
import { 
  HomeIcon, 
  UsersIcon, 
  SearchIcon, 
  SettingsIcon,
  DeskIcon,
  MapIcon,
  ChartIcon
} from './icons'
import { useAuthStore } from '../stores/authStore'

const navigation = [
  { name: 'Dashboard', href: '/', icon: HomeIcon },
  { name: 'Mein Profil', href: '/profile', icon: UsersIcon },
  { name: 'Mitarbeitende', href: '/employees', icon: UsersIcon },
  { name: 'Skill-Suche', href: '/search', icon: SearchIcon },
  { name: 'Team-Zusammenstellung', href: '/team', icon: UsersIcon },
  { name: 'Einstellungen', href: '/settings', icon: SettingsIcon },
]

export default function Sidebar() {
  const { user } = useAuthStore()
  
  // Filter navigation items based on user role
  const filteredNavigation = navigation.filter(item => {
    if (!item.roles) return true
    return item.roles.includes(user?.role || '')
  })
  
  return (
    <div className="w-[260px] bg-secondary dark:bg-dark-bg-sidebar border-r border-primary">
      <div className="p-5">
        <h1 className="text-title-card font-poppins font-semibold text-primary">
          SkillMate
        </h1>
      </div>
      
      <nav className="px-5 space-y-1">
        {filteredNavigation.map((item) => (
          <NavLink
            key={item.name}
            to={item.href}
            className={({ isActive }) =>
              `sidebar-item ${isActive ? 'sidebar-item-active' : ''}`
            }
          >
            <item.icon className="w-5 h-5 mr-3 flex-shrink-0" />
            <span className="font-poppins font-medium">{item.name}</span>
          </NavLink>
        ))}
      </nav>
    </div>
  )
}
