import { Center, Divider, Group, Text } from "@mantine/core";
import { ProfitChartDataItem } from "../../../../../../client";
import PageBlock from "../../../../../../components/PageBlock/PageBlock.tsx";

type Props = {
    profitData: ProfitChartDataItem[];
};

export const Total = ({ profitData }: Props) => {
    const totalRevenue = profitData.reduce(
        (sum, dataItem) => dataItem.revenue + sum,
        0,
    );
    const totalExpense = profitData.reduce(
        (sum, dataItem) => dataItem.expenses + sum,
        0,
    );
    const totalProfit = profitData.reduce(
        (sum, dataItem) => dataItem.profit + sum,
        0,
    );
    const totalCount = profitData.reduce(
        (sum, dataItem) => dataItem.cardsCount + sum,
        0,
    );

    return (
        <PageBlock style={{ padding: "25px", height: "7vh", flexGrow: 0 }}>
            <Group gap={2} justify={"space-between"}>
                <Center w={"24%"}>
                    <Text>Выручка: {new Intl.NumberFormat("ru-RU").format(totalRevenue)} ₽</Text>
                </Center>
                <Divider size={"md"} orientation="vertical" />
                <Center w={"24%"}>
                    <Text>Расходы: {new Intl.NumberFormat("ru-RU").format(totalExpense)} ₽</Text>
                </Center>
                <Divider size={"md"} orientation="vertical" />
                <Center w={"24%"}>
                    <Text>Прибыль: {new Intl.NumberFormat("ru-RU").format(totalProfit)} ₽</Text>
                </Center>
                <Divider size={"md"} orientation="vertical" />
                <Center w={"24%"}>
                    <Text>Карточек: {new Intl.NumberFormat("ru-RU").format(totalCount)} шт</Text>
                </Center>
            </Group>
        </PageBlock>
    );
};