"use client"

import { useEffect, useRef, useState } from "react"

/**
 * Une figure qui ne s'affiche que si la place existe pour la voir en entier.
 *
 * Nos schémas sont des planches : réduites, elles deviennent illisibles, et
 * renvoyées à un défilement latéral, personne ne pense à les faire glisser.
 * Mieux vaut ne rien montrer, le texte de la section portant déjà le propos.
 *
 * On mesure la largeur réellement disponible plutôt que de se fier à des
 * paliers d'écran : une colonne peut être étroite sur un grand écran, quand un
 * rail ou une seconde colonne lui prend sa place. Le calcul est borné par la
 * largeur de la fenêtre, au cas où un ancêtre aurait grandi pour contenir un
 * enfant plus large que l'écran.
 */
export default function FigureAdaptative({
  largeurMini,
  className = "",
  children,
}: {
  /** Largeur, en pixels, sous laquelle la figure n'est plus lisible. */
  largeurMini: number
  /** Classes appliquées au cadre lorsque la figure est affichée. */
  className?: string
  children: React.ReactNode
}) {
  const cadre = useRef<HTMLDivElement>(null)
  const [assezLarge, setAssezLarge] = useState(true)

  useEffect(() => {
    const el = cadre.current
    if (!el) return
    const mesurer = () =>
      setAssezLarge(
        Math.min(el.clientWidth, document.documentElement.clientWidth) >= largeurMini
      )
    mesurer()
    const ro = new ResizeObserver(mesurer)
    ro.observe(el)
    return () => ro.disconnect()
  }, [largeurMini])

  return (
    <div ref={cadre} className={assezLarge ? className : ""}>
      {assezLarge ? children : null}
    </div>
  )
}