import { ReactNode } from "react";
import type { UserInfo } from "../../types/account-dashboard-types";
import { UserIdCopy } from "./user-id-copy";

interface UserInfoProps {
	userInfo: UserInfo;
}

export function UserInfoView({ userInfo }: UserInfoProps): React.JSX.Element {
	const { provider, userId } = userInfo;
	return (
		<div className="kiro-account-dashboard-user-info">
			{provider && `Signed in with ${provider.label}`}
			{provider && userId && <span>|</span>}
			{userId && <UserIdCopy userId={userId} />}
		</div>
	);
}
