import { Space, Tag } from 'antd';

import { useI18n } from '../../frontend/i18n/react';
import type { MailboxPermissions } from '../../frontend/types';

export function MailboxPermissionTags({ permissions }: { permissions: MailboxPermissions }) {
  const { t } = useI18n();
  const values = [
    permissions.view ? ['view', t('mailboxPermission.view')] : null,
    permissions.receive ? ['receive', t('mailboxPermission.receive')] : null,
    permissions.send ? ['send', t('mailboxPermission.send')] : null
  ].filter(Boolean) as string[][];

  return values.length ? (
    <Space size={[4, 4]} wrap>
      {values.map(([key, label]) => <Tag key={key}>{label}</Tag>)}
    </Space>
  ) : <Tag>{t('mailboxPermission.none')}</Tag>;
}
