import React, { ReactNode } from "react";
import { useLangContext } from "../context";
import { Languages } from "../types";

interface ToggleLanguageProps {
  toggleLanguage: (lang: string) => void;
  classNames?: string;
  children?: ReactNode;
}

export const ToggleLanguage: React.FC<ToggleLanguageProps> = (
  props: ToggleLanguageProps
) => {
  const { lang, changeLanguage } = useLangContext();
  return (
    <div
      className={props.classNames}
      onClick={() => {
        changeLanguage(lang === Languages.ar ? Languages.en : Languages.ar);
      }}
      // style={{ cursor: "pointer" }}
      // id="myLocalizationBtn"
    >
      {props.children}
      {/* <span>{t("LanguageLabel")}</span>&nbsp; */}
    </div>
  );
};

export const SelectLanguage: React.FC<ToggleLanguageProps> = (
  props: ToggleLanguageProps
) => {
  const { lang, changeLanguage } = useLangContext();

  return (
    <div className={props.classNames}>
      <select
        id="languageSelect"
        value={lang || ""}
        onChange={(e) => {
          changeLanguage(e.target.value);
        }}
      >
        <option value={Languages.en}>English</option>
        <option value={Languages.ar}>عربي</option>
      </select>
    </div>
  );
};