AlertFieldLevel.tsx

import type { JSXElement } from '~/src/types/jsxElement';
import { Icon } from '../Icon/Icon';
import './Alert.css';

export type AlertFieldLevelType = 'error' | 'info' | 'success' | 'warning';

export enum AlertFieldLevelClass {
  'info' = '__info',
  'error' = '__error',
  'success' = '__success',
  'warning' = '__warning'
}

export const MapTypeToIconName = {
  info: 'information',
  error: 'error',
  success: 'approved',
  warning: 'warning'
};

export interface AlertFieldLevelProperties
  extends React.HTMLAttributes<HTMLDivElement> {
  status?: AlertFieldLevelType;
  message: React.ReactNode;
  isVisible?: boolean;
}

export const AlertFieldLevel = ({
  status = 'info',
  message,
  isVisible = true,
  ...properties
}: AlertFieldLevelProperties): JSXElement => {
  if (!isVisible || !message) return null;

  if (!['error', 'success', 'warning', 'info'].includes(status))
    return (
      <p data-testid='message'>
        [Error] Unsupported field-level alert type provided: {status}
      </p>
    );

  return (
    <div
      className={`a-form-alert a-form-alert${AlertFieldLevelClass[status]} a-alertfieldlevel-container`}
      role='alert'
      {...properties}
    >
      <Icon name={MapTypeToIconName[status]} alt={status} withBg />
      <span
        className='a-form-alert_text a-alertfieldlevel-text'
        data-testid='message'
      >
        {message}
      </span>
    </div>
  );
};