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 : unknown;
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(255, 255, 255, 1)","paddingLeft":"16px","borderBottomRightRadius":"2px","fontSize":"14px","fontWeight":"500","height":"32px","backgroundColor":"rgba(128, 128, 128, 1)","fontFamily":"Inter,sans-serif","borderTopLeftRadius":"2px","fontStyle":"normal","borderTopRightRadius":"2px","paddingRight":"16px","borderBottomLeftRadius":"2px"}},"buttonIcon":{"normal":{"color":"rgba(255, 255, 255, 1)","marginLeft":"8px"}},"menu":{"normal":{"borderBottomLeftRadius":"2px","borderBottomRightRadius":"2px","borderTopRightRadius":"2px","paddingLeft":"0","borderTopLeftRadius":"2px","boxShadow":"0 2px 13px 0 hsla(0, 0%, 0%, 0.08)","paddingTop":"0px","paddingBottom":"0px","backgroundColor":"rgba(128, 128, 128, 1)","paddingRight":"0"}},"item":{"normal":{"fontFamily":"Inter,sans-serif","paddingRight":"32px","color":"rgba(255, 255, 255, 1)","height":"32px","fontSize":"14px","paddingLeft":"32px"},"highlighted":{"backgroundColor":"rgba(19, 19, 21, 1)"},"disabled":{"color":"rgba(250, 253, 255, 0.5)"},"grouped":{"paddingLeft":"32px"}},"itemIcon":{"normal":{"marginLeft":"8px"}},"label":{"normal":{"fontSize":"14px","paddingRight":"8px","paddingLeft":"30px","fontFamily":"Inter,sans-serif","height":"32px","color":"rgba(255, 255, 255, 1)"}},"separator":{"normal":{"height":"1px","marginRight":"0","marginBottom":"4px","backgroundColor":"hsl(240, 10%, 90%)","marginTop":"4px","marginLeft":"0"}},"scrollIndicator":{"normal":{"color":"rgba(255, 255, 255, 1)","backgroundColor":"rgba(128, 128, 128, 1)","height":"16px"},"hover":{"backgroundColor":"rgba(19, 19, 21, 1)"}}},"variants":{}}}/>
  );
});

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