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

export type DividerProps = DividerPropsPrimitive & {
  size?: '1' | 1 | '2' | 2 | '3' | 3;
align?: 'left';
}

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":{"marginRight":"auto","marginBottom":"32px","marginTop":"32px","height":"1px","marginLeft":"auto","backgroundColor":"rgba(128, 128, 128, 1)"}}},"variants":{"size":{"1":{"divider":{"normal":{"maxWidth":"32px"}}},"2":{"divider":{"normal":{"maxWidth":"64px"}}},"3":{"divider":{"normal":{"maxWidth":"128px"}}}},"align":{"left":{"divider":{"normal":{"marginLeft":"0","marginRight":"0"}}}}}}}/>
  );
});