import * as React from 'react';
import { Children } from 'react';

export interface NavigationOptionListProps {
  children: React.ReactNode;
}

/**
 * @deprecated Use `<List />` and `<ListItem />` instead.
 * @deprecatedSince 46.104.0
 * @see [List source](../list/List.tsx)
 * @see [ListItem source](../listItem/ListItem.tsx)
 * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
 * @see [Design docs](https://wise.design/components/list-item)
 * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
 */
const NavigationOptionList = ({ children }: NavigationOptionListProps) => {
  return (
    <ul className="np-navigation-options-list">
      {Children.map(children, (child) => (
        <li key={child?.toString()} className="np-navigation-options-list__item">
          {child}
        </li>
      ))}
    </ul>
  );
};

export default NavigationOptionList;