import React, { useState } from 'react';
import {
  Nav,
  NavList,
  NavListItemAction,
  useNavList,
} from '@digigov/ui/navigation/NavList';

const links = [
  {
    name: 'home',
    href: '#home',
    label: 'Αρχική',
  },
  {
    name: 'educational',
    label: 'Εκπαιδευτικό υλικό',
    href: '#educational',
  },
  {
    name: 'news',
    href: '#news',
    label: 'Νέα',
    badge: '2',
  },
];

export const WithBadge = (_: any) => {
  const { registerNavItem } = useNavList();
  const [useActive, setUseActive] = useState('');

  return (
    <Nav
      aria-orientation="horizontal"
      role="menubar"
      aria-label="navigation list"
    >
      <NavList>
        {links.map((item, key) => (
          <NavListItemAction
            {...registerNavItem(item)}
            badgeText={item.badge}
            key={key}
            active={item.name === useActive}
            onClick={() => setUseActive(item.name)}
          >
            {item.label}
          </NavListItemAction>
        ))}
      </NavList>
    </Nav>
  );
};

export default WithBadge;