import React from 'react';
import { Link } from 'react-router-dom';
import '../css/MainPage.css';
import {useDataPage} from "../API/common.ts";
import {Survey} from "../types/survey.ts";
import {LoadingList} from "../components/LoadingList.tsx";

export function MainPage() {

    const surveys = useDataPage<Survey>("surveys", "surveys")



    return (
        <div className="main-page">
            <h2 className="title">Тесты для школьников и абитуриентов</h2>

            <div className={"surveys-list"}>
                <LoadingList data={surveys.items} listElement={(s: Survey)=>(
                    <Link key={s.id} to={`surveys/${s.id}/`}>{s.title}</Link>
                )}/>
            </div>

            <p className="description">
                Добро пожаловать на Pro-Fi Test — ваш надежный помощник в мире профессий!
                Мы понимаем, что выбор будущей профессии — это одно из самых важных решений
                в жизни каждого школьника. Наша миссия — помочь молодым людям найти свой путь,
                раскрыть таланты и понять, какие профессии соответствуют их интересам и способностям.
            </p>
        </div>
    );
}