import { useSelector } from "react-redux";
import { AppState } from "@/state/reducer";
import React from "react";
import { Page } from "@/pages/base";
import { useTranslation } from "react-i18next";
import { Container, Link, Typography } from "@material-ui/core";
import StudentForm from "@/forms/user";
import { Student } from "@/data";
import { Link as RouterLink } from "react-router-dom";
import { route } from "@/routing";

export const UserFillPage = () => {
    const student = useSelector<AppState>(state => state.student) as Student;

    const { t } = useTranslation();

    return <Page>
        <Page.Header maxWidth="md">
            <Page.Breadcrumbs>
                <Link component={ RouterLink } to={ route("home") }>{ t("pages.my-internship.header") }</Link>
                <Typography color="textPrimary">{ t("pages.user-fill.title") }</Typography>
            </Page.Breadcrumbs>
            <Page.Title>{ t("pages.user-fill.title") }</Page.Title>
        </Page.Header>
        <Container>
            <StudentForm student={ student } />
        </Container>
    </Page>
}

export default UserFillPage;