import React from "react";
import Translate from "./../../translate/Translate";
import TabView from "../tab-view/TabView";
import { IAuditableCommission } from "../../shared/models/Commission";
import CommissionRatesEditor from "../../containers/commissions-page/CommissionRatesEditor";
import CommissionTable from "./CommissionTable";

interface ITabbedCommissionViewProps {
    commissions: IAuditableCommission[];
}

const viewTranslate = Translate.Get.components.commissions.tabbedComissionView;

const TabbedCommissionView: React.FC<ITabbedCommissionViewProps> = (
    props: ITabbedCommissionViewProps
) => {
    return (
        <TabView
            data-test="tabbed-commission-view"
            pages={[
                {
                    header: viewTranslate.ratesTab,
                    element: <CommissionRatesEditor />
                },
                {
                    header: viewTranslate.tableTab,
                    element: <CommissionTable commissions={props.commissions} />
                }
            ]}
        />
    );
};

export default TabbedCommissionView;