import React, {useMemo} from 'react';
import {ViewStyle, StyleProp} from 'react-native';
import {Alert, AlertVariant} from '@components';

interface Props {
  description?: string;
  messageType?: AlertVariant;
  messages: string[];
  style?: StyleProp<ViewStyle>;
  withClose?: boolean;
}

function Message({
  description,
  messageType = 'info',
  messages,
  style,
  withClose,
}: Props) {
  const messagesText = useMemo(() => {
    if (messages.length === 1) {
      return messages[0];
    }
    return messages.map(message => `• ${message}`).join('\n');
  }, [messages]);

  return (
    <Alert
      description={description}
      style={style}
      title={messagesText}
      variant={messageType}
      withClose={withClose}
    />
  );
}

export default Message;