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["totalsByCurrency"] };

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

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

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

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

export { IncomeSummary };