// Render prop : un composant reçoit une FONCTION comme prop, qui décide du rendu
function SuiviSouris({ render }) {
    const [position, setPosition] = useState({ x: 0, y: 0 });

    function gererMouvement(e) {
        setPosition({ x: e.clientX, y: e.clientY });
    }

    return (
        <div onMouseMove={gererMouvement} style={{ height: "100vh" }}>
            {render(position)}
        </div>
    );
}

function App() {
    return (
        <SuiviSouris render={(pos) => (
            <p>Souris à {pos.x}, {pos.y}</p>
        )} />
    );
}

// Variante "children as a function" : même idée, via children
function SuiviSouris2({ children }) {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    return (
        <div onMouseMove={(e) => setPosition({ x: e.clientX, y: e.clientY })}>
            {children(position)}
        </div>
    );
}
// <SuiviSouris2>{(pos) => <p>{pos.x}, {pos.y}</p>}</SuiviSouris2>

// Higher-Order Component (HOC) : une fonction qui prend un composant, en retourne un autre enrichi
function avecChargement(ComposantEnveloppe) {
    return function ComposantAvecChargement({ chargement, ...props }) {
        if (chargement) return <p>Chargement...</p>;
        return <ComposantEnveloppe {...props} />;
    };
}

function ListeUtilisateurs({ utilisateurs }) {
    return <ul>{utilisateurs.map((u) => <li key={u.id}>{u.nom}</li>)}</ul>;
}

const ListeUtilisateursAvecChargement = avecChargement(ListeUtilisateurs);

// utilisation : <ListeUtilisateursAvecChargement chargement={true} utilisateurs={[]} />

// HOC composables : le piège du "wrapper hell" en imbriquant plusieurs HOC
const ComposantFinal = avecAuth(avecChargement(avecTheme(MonComposant)));
// difficile à lire, difficile à débugger dans les DevTools (plusieurs couches anonymes)

// Équivalent en hooks custom : généralement PRÉFÉRÉ aujourd'hui, plus lisible
function MonComposant() {
    const { utilisateur } = useAuth();
    const { chargement, donnees } = useFetch("/api/donnees");
    const theme = useTheme();

    if (chargement) return <p>Chargement...</p>;
    return <div className={theme}>{/* ... */}</div>;
}

// Cas où HOC reste pertinent aujourd'hui : injecter des props transverses au niveau du ROUTAGE,
// par exemple protéger une route entière plutôt qu'un composant interne
function routeProtegee(ComposantPage) {
    return function RouteProtegee(props) {
        const { utilisateur } = useAuth();
        if (!utilisateur) return <Navigate to="/login" />;
        return <ComposantPage {...props} />;
    };
}

const PageProfilProtegee = routeProtegee(PageProfil);