import React from 'react';
import { Slider as SliderPrimitive, SliderProps as SliderPropsPrimitive } from '@modulz/primitives';

export type SliderProps = SliderPropsPrimitive

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

export const Slider = React.forwardRef<PrimitiveRefType, SliderProps>((props, ref) => {
  return (
    <SliderPrimitive {...props} ref={ref}  styleConfig={{"base":{"slider":{"normal":{"paddingTop":"0","paddingBottom":"0"}},"track":{"normal":{"borderBottomRightRadius":"4px","backgroundColor":"rgba(128, 128, 128, 1)","borderBottomLeftRadius":"4px","height":"4px","borderTopLeftRadius":"4px","borderTopRightRadius":"4px"}},"innerTrack":{"normal":{"borderRadius":"inherit","backgroundColor":"rgba(128, 128, 128, 1)"}},"thumb":{"normal":{"backgroundColor":"rgba(19, 19, 21, 1)","borderBottomLeftRadius":"9999px","boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.09)","width":"16px","height":"16px","borderBottomRightRadius":"9999px","borderTopRightRadius":"9999px","borderTopLeftRadius":"9999px"}}},"variants":{}}}/>
  );
});