import React, { useEffect, useState, type ReactNode } from "react";
import fontIcon from "../assets/icons/font.svg";
import { getScriptPredictor } from "@sortug/langlib";

function useLangFont({ text }: { text: string }) {
  useEffect(() => {
    const predictor = getScriptPredictor();
    const res = predictor(text);
    console.log("script predicted", res);
    setScript(res[0]);
  }, [text]);
  const [script, setScript] = useState<string | null>(null);
  const [fontIdx, setFont] = useState(0);
  const fontCount = 6;
  function changeFont() {
    if (fontIdx === fontCount) setFont(0);
    else setFont((prev) => prev + 1);
  }
  // if (script === "Hani") return {}
}
// function FontChanger({
//   lang,
//   children,
// }: {
//   lang: string;
//   children: ReactNode;
// }) {
//   useEffect(() => {}, []);
//   const [script, setScript] = useState("Latn");
//   const [fontIdx, setFont] = useState(0);
//   const fontCount = 6;
//   function changeFont() {
//     if (fontIdx === fontCount) setFont(0);
//     else setFont((prev) => prev + 1);
//   }
//   return (
//     <div className="font-changer" lang={script}>
//       <img className="font-icon cp" onClick={changeFont} src={fontIcon} />
//       {children}
//     </div>
//   );
// }

export default useLangFont;