import React from 'react';
import { Link as LinkPrimitive, LinkProps as LinkPropsPrimitive } from '@modulz/primitives';

export type LinkProps = LinkPropsPrimitive & {
  variant?: 'ghost' | 'twitter' | 'blue' | 'gray';
color?: 'pink' | 'black';
}

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

export const Link = React.forwardRef<PrimitiveRefType, LinkProps>((props, ref) => {
  return (
    <LinkPrimitive {...props} ref={ref}  styleConfig={{"base":{"link":{"normal":{"transition":"all 100ms linear 0ms","color":"inherit","paddingTop":"0px","fontFamily":"Inter,sans-serif","paddingBottom":"0px","textDecoration":"none","boxShadow":"0px 1px 0px 0px rgba(128, 128, 128, 1)"},"hover":{"transition":"all 100ms linear 0ms","color":"rgba(128, 128, 128, 1)"},"focus":{"color":"rgba(128, 128, 128, 1)","boxShadow":"0px 0px 0px 2px rgba(128, 128, 128, 1)"}}},"variants":{"variant":{"ghost":{"link":{"normal":{"textDecoration":"none","boxShadow":"none"}}}},"color":{"pink":{"link":{"hover":{"boxShadow":"0px 1px 0px 0px rgba(232, 141, 163, 1)","color":"rgba(232, 141, 163, 1)"},"focus":{"boxShadow":"0px 0px 0px 2px rgba(232, 141, 163, 1)","color":"rgba(232, 141, 163, 1)"}}},"black":{"link":{"hover":{"boxShadow":"0px 1px 0px 0px rgba(19, 19, 21, 1)","color":"rgba(19, 19, 21, 1)"},"focus":{"boxShadow":"0px 0px 0px 2px rgba(19, 19, 21, 1)","color":"rgba(19, 19, 21, 1)"}}}}}}}/>
  );
});