import { Tag } from 'antd';
import { useCommonMessages } from 'components/i18n';

const StatusType = ({
  statusType,
  specificTranslations,
}: {
  statusType:
    | 'online'
    | 'error'
    | 'offline'
    | 'unauthorized'
    | 'config_errors'
    | 'connecting';
  specificTranslations?: {
    connected?: string;
    disconnected?: string;
    unauthorized?: string;
    error?: string;
    connecting?: string;
  };
}): JSX.Element => {
  const {
    statusMessages: {
      connected,
      disconnected,
      unauthorized,
      error,
      connecting,
    },
  } = useCommonMessages();

  const statusConfig = {
    online: {
      color: 'green',
      title: specificTranslations?.connected || connected,
    },
    offline: {
      color: 'red',
      title: specificTranslations?.disconnected || disconnected,
    },
    unauthorized: {
      color: 'blue',
      title: specificTranslations?.unauthorized || unauthorized,
    },
    config_errors: {
      color: 'magenta',
      title: specificTranslations?.error || error,
    },
    error: {
      color: 'magenta',
      title: specificTranslations?.error || error,
    },
    connecting: {
      color: 'orange',
      title: specificTranslations?.connecting || connecting,
    },
  };

  const { color, title } = statusConfig[statusType];

  return <Tag color={color}>{title}</Tag>;
};

export default StatusType;
