import { HeaderTag, HeaderTagIcon } from '@rocket.chat/ui-client';
import { useMemo } from 'react';

import type { IRoomWithFederationOriginalName } from '../contexts/RoomContext';

export type FederatedRoomOriginServerProps = {
	room: IRoomWithFederationOriginalName;
};

const FederatedRoomOriginServer = ({ room }: FederatedRoomOriginServerProps) => {
	const originServerName = useMemo(() => room.federationOriginalName?.split(':')[1], [room.federationOriginalName]);
	if (!originServerName) {
		return null;
	}
	return (
		<HeaderTag data-qa='federated-origin-server-name'>
			<HeaderTagIcon icon={{ name: 'globe' }} />
			{originServerName}
		</HeaderTag>
	);
};

export default FederatedRoomOriginServer;