import React from 'react';
import { Alert as AlertPrimitive, AlertProps as AlertPropsPrimitive } from '@modulz/primitives';

export type AlertProps = AlertPropsPrimitive & {
  variant?: 'red' | 'yellow' | 'blue' | 'green';
}

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

export const Alert = React.forwardRef<PrimitiveRefType, AlertProps>((props, ref) => {
  return (
    <AlertPrimitive {...props} ref={ref}  styleConfig={{"base":{"alert":{"normal":{"border":"1px solid","borderColor":"hsl(240, 5%, 85%)","backgroundColor":"hsl(240, 20%, 95%)","borderBottomRightRadius":"4px","borderTopLeftRadius":"4px","paddingLeft":"16px","paddingBottom":"16px","borderBottomLeftRadius":"4px","paddingRight":"16px","paddingTop":"16px","borderTopRightRadius":"4px"}}},"variants":{"variant":{"red":{"alert":{"normal":{"backgroundColor":"hsl(5, 100%, 95%)","border":"1px solid","borderColor":"hsl(5, 100%, 60%)"}}},"yellow":{"alert":{"normal":{"border":"1px solid","borderColor":"hsl(50, 100%, 50%)","backgroundColor":"hsl(50, 100%, 95%)"}}},"blue":{"alert":{"normal":{"backgroundColor":"rgba(139, 194, 255, 0.14)"}}},"green":{"alert":{"normal":{"border":"1px solid","borderColor":"hsl(140, 60%, 50%)"}}}}}}}/>
  );
});


