import { Link } from 'react-router-dom'
import { SERVICE_SIDEBAR_ITEMS, MENU_ITEM_IDS } from '../../config'

export default function ServiceSidebar({ activeSlug }) {
  return (
    <div className="elementor-element elementor-element-205732a elementor-widget elementor-widget-sidebar" data-id="205732a" data-element_type="widget" data-e-type="widget" data-widget_type="sidebar.default">
      <div className="elementor-widget-container">
        <div id="nav_menu-2" className="widget widget_nav_menu">
          <div className="menu-service-side-panel-container">
            <ul id="menu-service-side-panel" className="menu">
              {SERVICE_SIDEBAR_ITEMS.map((item) => (
                <li
                  key={item.postId}
                  id={`menu-item-${MENU_ITEM_IDS[item.slug]}`}
                  className={`menu-item menu-item-type-post_type menu-item-object-page ${activeSlug === item.slug ? 'current-menu-item' : ''}`}
                >
                  <Link
                    to={`/service/${item.slug}`}
                    {...(activeSlug === item.slug ? { 'aria-current': 'page' } : {})}
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
