import React, { ReactElement, ReactNode, forwardRef } from 'react';
import css from '../../utils/css';

import { StyledMenu } from './StyledMenu';
import { CommonProps } from '../common';

export interface MenuProps extends CommonProps {
  /**
   * List of items in menu.
   */
  children: ReactNode;
}

const Menu = forwardRef<HTMLUListElement, MenuProps>(
  (
    {
      children,
      id,
      className,
      style,
      sx = {},
      'data-test-id': dataTestId,
      ...otherUlAttrs
    }: MenuProps,
    forwardedRef
  ): ReactElement => (
    <StyledMenu
      {...otherUlAttrs}
      ref={forwardedRef}
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {children}
    </StyledMenu>
  )
);

Menu.displayName = 'Menu';

export default Menu;