import { clsx } from 'clsx';
import { ReactNode } from 'react';

import { Sentiment, Size } from '../common';
import StatusIcon from '../statusIcon';
import Body from '../body';

export interface InlineAlertProps {
  id?: string;
  type?: `${Sentiment}`;
  iconLabel?: string;
  className?: string;
  children: ReactNode;
}

const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
  Sentiment.NEGATIVE,
  Sentiment.ERROR,
  Sentiment.POSITIVE,
  Sentiment.SUCCESS,
  Sentiment.WARNING,
]);

/**
 * @deprecated Use [<InlinePrompt />](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) or [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.
 */
export default function InlineAlert({
  id,
  type = 'neutral',
  iconLabel,
  className,
  children,
}: InlineAlertProps) {
  return (
    <Body
      role="alert"
      id={id}
      className={clsx(
        'alert alert-detach',
        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,
        'd-flex',
        className,
      )}
    >
      {iconTypes.has(type) && (
        <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />
      )}
      <div>{children}</div>
    </Body>
  );
}
