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 : any;
type PrimitiveRefType = ExtractRefType<DividerPropsPrimitive>  

export const Divider = React.forwardRef<PrimitiveRefType, DividerProps>((props, ref) => {
  return (
    <DividerPrimitive {...props} ref={ref}  styleConfig={{"base":{"divider":{"normal":{"marginRight":"auto","marginBottom":"24px","backgroundColor":"rgba(245, 247, 249, 1)","height":"1px","marginLeft":"auto","marginTop":"24px"}}},"variants":{"size":{"small":{"divider":{"normal":{"maxWidth":"16px"}}},"medium":{"divider":{"normal":{"maxWidth":"40px"}}},"large":{"divider":{"normal":{"maxWidth":"80px"}}}}}}}/>
  );
});