import { Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { getSidebarMenuItems } from '@/constants/navigation';
import { colors } from '@/design/tokens/colors';
import { spacing } from '@/design/tokens/spacing';

const Sidebar = () => {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <Menu
      mode="inline"
      selectedKeys={[location.pathname]}
      items={getSidebarMenuItems()}
      onClick={({ key }) => navigate(key)}
      style={{ height: '100%', borderInlineEnd: 0, paddingTop: spacing.sm, background: colors.background, color: colors.text }}
    />
  );
};

export default Sidebar;