import React from "react";

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

import Content from "../../../../containers/Content";
import { useI18n } from "../../../../contexts/I18nContext";
import { ContribComponent, LimitOffset } from "../../../../types";
import { OrderListItem } from "../../types/order";
import OrderDetail from "../order/OrderDetail";

const PurchaseOrderList: ContribComponent<LimitOffset<OrderListItem>> = ({
  data: { next: _next, previous: _previous, results },
}) => {
  const { t } = useI18n();

  return (
    <Content layout="fixedWidth">
      {results.length === 0 && (
        <Typography align="center" color="text.disabled" fontStyle="italic" m="0 auto">
          {t("There's no order for this purchase.")}
        </Typography>
      )}

      {results.map((order) => (
        <OrderDetail key={order.reference} order={order} />
      ))}
    </Content>
  );
};

export default PurchaseOrderList;