import React from 'react';
import { Card as CardPrimitive, CardProps as CardPropsPrimitive } from '@modulz/primitives';

export type CardProps = CardPropsPrimitive & {
  variant?: 'border' | 'ghost';
}

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

export const Card = React.forwardRef<PrimitiveRefType, CardProps>((props, ref) => {
  return (
    <CardPrimitive {...props} ref={ref}  styleConfig={{"base":{"card":{"normal":{"borderBottomLeftRadius":"4px","overflow":"hidden","borderTopRightRadius":"4px","boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.15)","borderBottomRightRadius":"4px","backgroundColor":"hsl(0, 0%, 100%)","borderTopLeftRadius":"4px"}}},"variants":{"variant":{"border":{"card":{"normal":{"border":"1px solid","borderColor":"hsl(240, 5%, 85%)","boxShadow":"none","transform":" scalex(1)"}}},"ghost":{"card":{"normal":{"boxShadow":"none"}}}}}}}/>
  );
});


