import React from 'react';
import { Divider as DividerPrimitive, DividerProps as DividerPropsPrimitive } from '@modulz/primitives';

export type DividerProps = DividerPropsPrimitive & {
  size?: 'small' | 'medium' | 'large';
}

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

export const Divider = React.forwardRef<PrimitiveRefType, DividerProps>((props, ref) => {
  return (
    <DividerPrimitive {...props} ref={ref}  styleConfig={{"base":{"divider":{"normal":{"backgroundColor":"hsl(240, 10%, 90%)","marginLeft":"auto","marginRight":"auto","height":"1px"}}},"variants":{"size":{"small":{"divider":{"normal":{"maxWidth":"16px"}}},"medium":{"divider":{"normal":{"maxWidth":"40px"}}},"large":{"divider":{"normal":{"maxWidth":"96px"}}}}}}}/>
  );
});


