import React from 'react';
import {
  Dropdown,
  DropdownButton,
  DropdownContent,
} from '@digigov/ui/navigation/Dropdown';
import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';

const data = [
  {
    name: 'Item 1',
    href: '#',
  },
  {
    name: 'Item 2',
    href: '#',
  },
  {
    name: 'Item 3',
    href: '#',
  },
  {
    name: 'Item 4',
    href: '#',
  },
  {
    name: 'Item 5',
    href: '#',
  },
  {
    name: 'Item 6',
    href: '#',
  },
  {
    name: 'Item 7',
    href: '#',
  },
  {
    name: 'Item 8',
    href: '#',
  },
  {
    name: 'Item 9',
    href: '#',
  },
  {
    name: 'Item 10',
    href: '#',
  },
  {
    name: 'Item 11',
    href: '#',
  },
  {
    name: 'Item 12',
    href: '#',
  },
];

export const ScrollableContent = (_: any) => (
  <Dropdown>
    <DropdownButton
      role="button"
      aria-haspopup="true"
      aria-controls="menu2"
      arrow
    >
      Ενέργειες
    </DropdownButton>
    <DropdownContent role="menu" id="menu2" scrollable>
      <NavList layout="vertical">
        {data.map((item) => (
          <NavListItemAction key={item.name} role="menuitem" href={item.href}>
            {item.name}
          </NavListItemAction>
        ))}
      </NavList>
    </DropdownContent>
  </Dropdown>
);

export default ScrollableContent;