import React from "react";

import { Header } from "../../../components/Header";
import { Page } from "../../../components/Page";
import { TitleBar } from "../../../components/TitleBar";
import Content, { TwoColumn } from "../../../containers/Content";
import { useApi } from "../../../contexts/ApiContext";
import { PageComponent } from "../../../types";
import PayoutCard from "../components/PayoutCard";
import PurchaseCard from "../components/PurchaseCard";

export const ReportPage: PageComponent = () => {
  const api = useApi();

  return (
    <Page>
      <Header>
        <TitleBar title="Reports" />
      </Header>

      <Content layout="fixedWidth">
        <TwoColumn>
          {api.operations["report.purchase:create"] && <PurchaseCard />}
          {api.operations["report.payout:create"] && <PayoutCard />}
        </TwoColumn>
      </Content>
    </Page>
  );
};

export default ReportPage;