import React from "react";

import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";

import { PurchaseAmountItem } from "../../../types/dashboard";
import { currencyFormat } from "../utils/amountToCurrencyString";

export interface SitesAmountsListProps {
  data: PurchaseAmountItem[];
  isExchanged: boolean;
}

const SitesAmountsList: React.FC<SitesAmountsListProps> = ({ data, isExchanged }) => {
  return (
    <Stack direction={"column"} px={2}>
      {data.map((item) => (
        <Stack
          key={item.site_code}
          alignItems={"center"}
          direction={"row"}
          justifyContent={"space-between"}
          spacing={1}
        >
          <Typography>{item.site_code}</Typography>
          <Typography component="p" fontSize={20} fontWeight={700} variant="h5">
            {currencyFormat(Number(item.amount), item.currency, undefined, isExchanged ? 0 : 2)}
          </Typography>
        </Stack>
      ))}
    </Stack>
  );
};

export default SitesAmountsList;