import {LoadingList} from "../components/LoadingList.tsx";
import {Survey} from "../types/survey.ts";
import {Link, useParams} from "react-router-dom";
import React from "react";
import {useData, useDataPage} from "../API/common.ts";
import {LoadingData} from "../components/LoadingData.tsx";



export function SurveyPage() {

    const {surveyId} = useParams();

    const survey = useData<Survey>("surveys", "surveys", surveyId);

    return (
        <div className="survey-page">
            <LoadingData data={survey}>
                <h1>
                    {survey?.title}
                </h1>
                <div>
                    {survey?.description}
                </div>

                <SurveyQuestions survey={survey}/>

            </LoadingData>

        </div>
    );
}


function SurveyQuestions({survey}: { survey: Survey | null | undefined }) {

    const _survey = survey as Survey;

    const questionsPairs = useDataPage("surveys", "question-pairs", {survey:_survey.id});
    const questionsAgreement = useDataPage("surveys", "question-pairs", {survey:_survey.id});

    //const questions =


    return (
        <>


        </>
    );
}