import { useFamily } from "../../widgets/BaseFamilyRoute";
import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";

export function FamilyHomeRoute(): React.ReactElement {
  const family = useFamily();
  return (
    <>
      <FamilyPageTitle title="Votre famille" />
      <div style={{ margin: "20px" }}>
        <p>
          Bienvenue sur l'espace dédié à la généalogie de votre famille !
          Veuillez utiliser le menu situé à gauche pour accéder aux différentes
          sections de l'application.
        </p>
        <p>Nombre de fiches de membres: {family.members.size}</p>
        <p>Nombre de fiches de couples: {family.couples.size}</p>
        <p>
          Vous pouvez inviter d'autres personnes à rejoindre cette famille en
          leur donnant une copie du code d'invitation
        </p>
      </div>
    </>
  );
}