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":{"paddingBottom":"0","paddingTop":"0"}},"track":{"normal":{"borderBottomLeftRadius":"2px","borderTopRightRadius":"2px","height":"4px","borderBottomRightRadius":"2px","backgroundColor":"hsl(240, 10%, 90%)","borderTopLeftRadius":"2px"}},"innerTrack":{"normal":{"backgroundColor":"hsl(240, 3%, 60%)","borderRadius":"inherit"}},"thumb":{"normal":{"borderBottomLeftRadius":"9999px","borderTopRightRadius":"9999px","height":"12px","boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.15)","borderBottomRightRadius":"9999px","backgroundColor":"hsl(0, 0%, 100%)","width":"12px","borderTopLeftRadius":"9999px"}}},"variants":{}}}/>
  );
});


