import type { FC } from "react";

import { Paper, Stack, Text, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";

import type { IncomeAnalytics } from "@/entities/income";

import { formatMoney } from "@/shared/lib";

type IncomeSummaryProps = { totals: IncomeAnalytics["total"] };

const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
	const { t } = useTranslation();

	return (
		<Stack>
			<Title order={2}>{t("income.summaryTitle")}</Title>

			<Paper p="md" radius="md" withBorder>
				<Text fw={700}>{formatMoney(props.totals.total)}</Text>

				<Text c="dimmed" size="sm">
					{t("income.coupon")}: {formatMoney(props.totals.coupon)} ·{" "}
					{t("income.dividend")}: {formatMoney(props.totals.dividend)}
				</Text>
			</Paper>
		</Stack>
	);
};

export { IncomeSummary };