import React from "react";

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

import { useI18n } from "../../../contexts/I18nContext";
import { currencyFormat } from "../utils/amountToCurrencyString";

export interface SitesTotalProps {
  amount: number;
  currency: string;
}

const SitesTotal: React.FC<SitesTotalProps> = ({ amount, currency }) => {
  const { t } = useI18n();

  return (
    <Stack
      alignItems="center"
      border={1}
      borderBottom={0}
      borderColor="divider"
      borderLeft={0}
      borderRight={0}
      direction="row"
      justifyContent="space-between"
      mt={2}
      mx={2}
    >
      <Typography color="textSecondary" variant="overline">
        {t("Total")}
      </Typography>
      <Typography component="p" fontSize={28} fontWeight={700} variant="h5">
        {currencyFormat(amount, currency, undefined, 0)}
      </Typography>
    </Stack>
  );
};

export default SitesTotal;