import React, { forwardRef } from 'react';
import { Box, Icon } from '@nova-hf/ui';

type InputMessageProps = {
  text: string;
  status: 'Error' | 'Success';
};
export const InputMessage = forwardRef(
  (props: InputMessageProps, ref?: React.Ref<HTMLInputElement>) => {
    const isSuccess = props.status === 'Success';
    return (
      <Box
        {...ref}
        aria-label={`${props.text}`}
        width="100%"
        disabled
        paddingX={2}
        paddingY={2}
        color={isSuccess ? 'green' : 'warning'}
        display="flex"
        alignItems="flex-start"
        justifyContent="center"
        borderRadius="medium"
        style={{
          fontFamily: 'poppins',
          fontSize: 14,
          fontWeight: '400',
          lineHeight: 'medium',
          textTransform: 'none',
          backgroundColor: isSuccess ? '#eeffee' : '#FFEEEE',
        }}
        gap={1}
      >
        <Icon icon={isSuccess ? 'checkMark' : 'lock'} color={isSuccess ? 'green' : 'warning'} />
        {props.text}
      </Box>
    );
  },
);

export default InputMessage;