export const handler: Handlers<ILanguageModel | null> = {
  async GET(_, ctx) {
    const resp = await fetch(`http://localhost:8000/api/languages/default`);
    if (resp.status === 404) {
      return ctx.render(null);
    }
    const data: ILanguageModel = await resp.json();
    return ctx.render(data);
  },
};

export default function LanguageToggle(data: ILanguageModel) {
  const [language, setLanguage] = useState(data.id);

  return (
    <div className="menu-operators">
      {JSON.stringify(language)}
    </div>
  );
}

export const handler: Handlers<ILanguageModel | null> = {
  async GET(_, ctx) {
    const resp = await fetch(`http://localhost:8000/api/languages/default`);
    if (resp.status === 404) {
      return ctx.render(null);
    }
    const data: ILanguageModel = await resp.json();
    return ctx.render(data);
  },
};

export default function LanguageToggle(data: ILanguageModel) {
  const [language, setLanguage] = useState(data.id);

  return (
    <div className="menu-operators">
      {JSON.stringify(language)}
    </div>
  );
}

export function Menu() {
  return (
    <nav>
        <a href="/" className="logo">
          <img src="/logo.svg" alt="Logo" />
        </a>
        <ul className="links-list">
          <li className="link">
            Hello
          </li>
          <li className="language-toggle">
            <LanguageToggle />
          </li>
        </ul>
        <MenuToggle />
    </nav>
  );
}

export function Menu() {
  return (
    <nav>
        <a href="/" className="logo">
          <img src="/logo.svg" alt="Logo" />
        </a>
        <ul className="links-list">
          <li className="link">
            Hello
          </li>
          <li className="language-toggle">
            <LanguageToggle />
          </li>
        </ul>
        <MenuToggle />
    </nav>
  );
}