import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
import {useFetch} from "../../../hooks/useFetch.js";
import {getCatName} from "../../../utils/Tools.js";
import {AxiosError} from "../../../components/AxiosError.jsx";
import {useTranslation} from "react-i18next";

export function SelectCard({userData}) {
    const setLoading = useLoadingSwitcher()
    const {data, error} = useFetch(`/selection/${userData.id}`, setLoading, 1)
    const {t} = useTranslation();

    return <div className="card mb-4 mb-md-0">
        <div className="card-header container-fluid">
            <div className="row">
                <div className="col">{t('sélectionEnéquipeDeFrance')}</div>
            </div>
        </div>
        <div className="card-body">
            <ul className="list-group">
                {data && data.sort((a, b) => b.saison - a.saison).map((selection, index) => {
                    return <div key={index} className="list-group-item d-flex justify-content-between align-items-start">
                        <div className="me-auto">{selection?.saison}-{selection?.saison + 1} {t('en')} {getCatName(selection?.categorie)}</div>
                    </div>
                })}
                {error && <AxiosError error={error}/>}
            </ul>
        </div>
    </div>;
}
