import React from 'react';
import { CardLink as CardLinkPrimitive, CardLinkProps as CardLinkPropsPrimitive } from '@modulz/primitives';

export type CardLinkProps = CardLinkPropsPrimitive & {
  variant?: 'border' | 'ghost';
}

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

export const CardLink = React.forwardRef<PrimitiveRefType, CardLinkProps>((props, ref) => {
  return (
    <CardLinkPrimitive {...props} ref={ref}  styleConfig={{"base":{"card":{"normal":{"backgroundColor":"hsl(0, 0%, 100%)","paddingBottom":"24px","borderTopLeftRadius":"12px","paddingLeft":"24px","boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.15)","paddingRight":"24px","paddingTop":"24px","borderBottomRightRadius":"12px","borderTopRightRadius":"12px","borderBottomLeftRadius":"12px"}}},"variants":{"variant":{"border":{"card":{"normal":{"border":"1px solid","borderColor":"rgba(226, 229, 233, 1)","boxShadow":"none"}}},"ghost":{"card":{"normal":{"boxShadow":"none"}}}}}}}/>
  );
});


