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 List from './List';

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

  const { corporate_id } = useParams();

  const pageTitle = 'Services';
  return (
    <Page title={pageTitle}>
      <HeaderBreadcrumbs
        heading={pageTitle}
        links={[
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: 'Corporate Name',
            href: '/corporates/' + corporate_id,
          },
          {
            name: 'Services',
            href: '/corporates/' + corporate_id + '/services',
          },
        ]}
      />

      <Card>
        <CorporateTabNavigations position={'services'} />

        <List />
      </Card>
    </Page>
  );
}
