import { Card, Grid } from "@mui/material";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import CorporateTabNavigations from "../CorporateTabNavigations";
import DivisionsList from "./List";



export default function Divisions() {
  const { themeStretch } = useSettings();

  const { corporate_id } = useParams();

  const pageTitle = 'Corporate Benefit';
  return (
    <Page title={ pageTitle }>

      <HeaderBreadcrumbs
        heading={ pageTitle }
        links={[
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: 'Corporate Name',
            href: '/corporates/'+corporate_id,
          },
          {
            name: 'Corporate Benefit',
            href: '/corporates/'+corporate_id+'/benefits',
          },
        ]}
      />

      <Grid container spacing={2}>
        <Grid item xs={8}>
          <Card>
            <CorporateTabNavigations position={'corporate-benefits'} />
            <DivisionsList />
          </Card>
        </Grid>
        <Grid item xs={4}>
          <Card sx={{ p: 2 }}>
            Corporate Detail Goes Here
            &nbsp;
          </Card>
        </Grid>
      </Grid>
    </Page>
  );
}
