import React from 'react';
import { Menu as MenuPrimitive, MenuProps as MenuPropsPrimitive } from '@modulz/primitives';

export type MenuProps = MenuPropsPrimitive

type ExtractRefType<TypesThatMayContainReactRef> = TypesThatMayContainReactRef extends {ref?: React.Ref<infer T>} ? T : unknown;
type PrimitiveRefType = ExtractRefType<MenuPropsPrimitive>  

export const Menu = React.forwardRef<PrimitiveRefType, MenuProps>((props, ref) => {
  return (
    <MenuPrimitive {...props} ref={ref}  styleConfig={{"base":{"menu":{"normal":{"borderTopLeftRadius":"2px","paddingTop":"0px","paddingBottom":"0px","borderBottomLeftRadius":"2px","borderTopRightRadius":"2px","borderBottomRightRadius":"2px","paddingLeft":"0","boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.15)","paddingRight":"0","backgroundColor":"rgba(128, 128, 128, 1)"}},"item":{"normal":{"paddingLeft":"30px","height":"32px","color":"rgba(255, 255, 255, 1)","paddingRight":"32px","fontFamily":"Inter,sans-serif","fontSize":"14px"},"highlighted":{"backgroundColor":"rgba(19, 19, 21, 1)"},"disabled":{"color":"rgba(250, 253, 255, 0.5)"},"grouped":{"paddingLeft":"32px"}},"itemIcon":{"normal":{"marginLeft":"8px"}},"label":{"normal":{"height":"32px","color":"rgba(255, 255, 255, 1)","paddingRight":"64px","fontFamily":"Inter,sans-serif","fontSize":"14px","paddingLeft":"30px"}},"separator":{"normal":{"backgroundColor":"rgba(255, 255, 255, 1)","marginRight":"0","marginLeft":"0","marginBottom":"0px","height":"1px","marginTop":"0px"}},"scrollIndicator":{"normal":{"backgroundColor":"rgba(255, 255, 255, 1)","height":"32px","color":"rgba(19, 19, 21, 1)"}}},"variants":{}}}/>
  );
});

export {MenuItem ,MenuItemCheckbox ,MenuItemRadioGroup ,MenuItemRadio ,MenuItemLabel ,MenuItemSeparator} from '@modulz/primitives';