import type { FC } from "react";

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

import { LedgerEntryRow } from "@/entities/broker-operation";

import type { IncomeDisplayModel } from "../../../model/display";

import classes from "../AccountIncomePage.module.css";

type IncomePaymentsProps = { entries: IncomeDisplayModel["entries"] };

const IncomePayments: FC<IncomePaymentsProps> = (props) => {
	const { t } = useTranslation();

	return (
		<Stack aria-label={t("income.payments")} component="section">
			<Title order={2}>{t("income.payments")}</Title>

			<Stack className={classes.entries} component="ul" gap="sm">
				{props.entries.map(({ key, operation }) => (
					<li key={key}>
						<LedgerEntryRow operation={operation} wrap />
					</li>
				))}
			</Stack>
		</Stack>
	);
};

export { IncomePayments };