import React, { useState } from 'react';
import { HorizontalMenu } from 'react-simple-horizontal-menu';
import '../../node_modules/react-simple-horizontal-menu/dist/styles/core.css';

const items = [...Array(100)].map((_, i) => {
  return {
    id: i,
    label: `No. ${i}`,
  };
});

export default function Test() {
  const [id, setId] = useState(0);

  const onChange = (_id: number) => {
    setId(_id);
  };

  const getLabel = items.find((item) => item.id === id)?.label ?? null;

  return (
    <div>
      dd
      <HorizontalMenu items={items} onChange={onChange} rtl={true} />
      <div
        style={{
          marginTop: '16px',
          display: 'flex',
          width: '100%',
          justifyContent: 'center',
        }}
      >
        Selected value: {getLabel}
      </div>
    </div>
  );
}