import React from 'react';
import { Popover as PopoverPrimitive, PopoverProps as PopoverPropsPrimitive } from '@modulz/primitives';

export type PopoverProps = PopoverPropsPrimitive

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

export const Popover = React.forwardRef<PrimitiveRefType, PopoverProps>((props, ref) => {
  return (
    <PopoverPrimitive {...props} ref={ref}  styleConfig={{"base":{"content":{"normal":{"boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 2px 10px -5px rgba(0, 0, 0, 0.15)","borderTopLeftRadius":"4px","borderBottomRightRadius":"4px","borderBottomLeftRadius":"4px","height":"128px","paddingLeft":"4px","paddingTop":"4px","backgroundColor":"rgba(128, 128, 128, 1)","borderTopRightRadius":"4px","paddingRight":"4px","width":"256px","paddingBottom":"4px"}},"arrow":{"normal":{"width":"8px","fill":"rgba(128, 128, 128, 1)","height":"4px"}}},"variants":{}}}/>
  );
});