import { ManageAccounts, People } from "@mui/icons-material";
import { Box, Tab, Tabs } from "@mui/material";
import { useState } from "react";
import { ComisionesPanel } from "./ComisionesPanel";
import { SupervisoresComisionesTab } from "./SupervisoresComisionesTab";

export function ComisionesWrapper() {
  const [sub, setSub] = useState(0);

  return (
    <Box>
      <Tabs
        value={sub}
        onChange={(_, v) => setSub(v)}
        sx={{ borderBottom: 1, borderColor: "divider", mb: 2, "& .MuiTab-root": { minHeight: 40, textTransform: "none", fontSize: "0.85rem" } }}
      >
        <Tab icon={<People fontSize="small" />} iconPosition="start" label="Vendedores / Cobradores" />
        <Tab icon={<ManageAccounts fontSize="small" />} iconPosition="start" label="Supervisores" />
      </Tabs>

      {sub === 0 && <ComisionesPanel />}
      {sub === 1 && <SupervisoresComisionesTab />}
    </Box>
  );
}