import { Corporate } from "@/@types/corporates";
import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
import { Card } from "@mui/material";
import { useContext, useEffect, useState } from "react";
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 hospitals() {

  const { corporate_id } = useParams();
  
  const [corporate, setCorporate] = useState<Corporate|null>();

  const configuredCorporateContext = useContext(ConfiguredCorporateContext);

  useEffect(() => {
    setCorporate(configuredCorporateContext.currentCorporate);
  }, [configuredCorporateContext])

  return (
    <Page title="Hospital">

      <HeaderBreadcrumbs
        heading={'Hospital'}
        links={[
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: corporate?.name ?? '-',
            href: '/corporates/' + corporate_id,
          },
          {
            name: 'Hospital',
            href: '/corporates/' + corporate_id + '/hospitals',
          },
        ]}
      />

      <Card>
        <CorporateTabNavigations position={'hospitals'} />
        <List />
      </Card>
    </Page>
  );
}
