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

export type MenuProps = MenuPropsPrimitive & {
  dark?: 'dark';

}

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

export const Menu = React.forwardRef<PrimitiveRefType, MenuProps>((props, ref) => {
  return (
    <MenuPrimitive {...props} ref={ref}  role="menu" styleConfig={{"base":{"menu":{"normal":{"backgroundColor":"hsl(0, 0%, 100%)","borderBottomRightRadius":"4px","paddingLeft":"0","paddingRight":"0","borderTopRightRadius":"4px","paddingTop":"4px","borderTopLeftRadius":"4px","boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.15)","paddingBottom":"4px","borderBottomLeftRadius":"4px"}},"item":{"normal":{"height":"24px","fontFamily":"Inter,sans-serif","fontSize":"12px","paddingRight":"32px","paddingLeft":"24px","color":"rgba(0, 0, 0, 1)"}},"itemIcon":{"normal":{"marginLeft":"4px"}},"label":{"normal":{"color":"hsl(240, 3%, 60%)","paddingLeft":"24px","height":"24px","fontFamily":"Inter,sans-serif","paddingRight":"32px","fontSize":"12px"}},"separator":{"normal":{"backgroundColor":"rgba(245, 247, 249, 1)","marginLeft":"0","height":"1px","marginBottom":"4px","marginRight":"0","marginTop":"4px"}},"scrollIndicator":{"normal":{"backgroundColor":"hsl(0, 0%, 100%)","height":"24px","color":"rgba(0, 0, 0, 1)"}}},"variants":{"dark":{"dark":{"menu":{"normal":{"backgroundColor":"rgba(40, 42, 46, 1)"}},"item":{"normal":{"color":"hsl(0, 0%, 100%)"}},"itemIcon":{"normal":{"color":"hsl(0, 0%, 100%)"}},"label":{"normal":{"color":"hsl(0, 0%, 100%)"}}}}}}}/>
  );
});

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