import React from 'react';
import { Select as SelectPrimitive, SelectProps as SelectPropsPrimitive } from '@modulz/primitives';

export type SelectProps = SelectPropsPrimitive

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

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

export {Option ,OptionGroup} from '@modulz/primitives';
