import { Stack, Text, Title } from "@mantine/core";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import type { BrokerageAccount } from "@/entities/brokerage-account";
import { accountTypeKey } from "@/entities/brokerage-account";

type AccountHeadingProps = {
	account?: BrokerageAccount;
};

const AccountHeading: FC<AccountHeadingProps> = (props) => {
	const { account } = props;
	const { t } = useTranslation();

	return (
		<Stack gap={2}>
			<Title order={1}>{account?.name ?? t("portfolio.title")}</Title>
			{account ? (
				<Text c="dimmed" size="sm">
					{t(accountTypeKey(account.type))}
				</Text>
			) : null}
		</Stack>
	);
};

export { AccountHeading };