import type { Card } from '@rocket.chat/fuselage';
import { useTranslation, useRouter } from '@rocket.chat/ui-contexts';
import type { ComponentProps } from 'react';

import { GenericCard, GenericCardButton } from '../../../components/GenericCard';

const AddUsersCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) => {
	const t = useTranslation();

	const router = useRouter();
	const handleOpenUsersRoute = (): void => {
		router.navigate('/admin/users');
	};

	return (
		<GenericCard
			title={t('Add_users')}
			body={t('Invite_and_add_members_to_this_workspace_to_start_communicating')}
			buttons={[
				<GenericCardButton key={1} onClick={handleOpenUsersRoute} primary>
					{t('Add_users')}
				</GenericCardButton>,
			]}
			width='x340'
			{...props}
		/>
	);
};

export default AddUsersCard;