import React, { useContext } from "react";
import { Dropdown } from "react-bootstrap";
import { LangContext } from "../../App";
import english from "./Img/english.png";
import hungarian from "./Img/hungarian.jpg";
import "./ChangeLangBtn.css";
export default function ChangeLangBtn({ title, className }) {
  const langContext = useContext(LangContext);
  return (
    <>
      <Dropdown>
        <Dropdown.Toggle
          variant="outline-light"
          id="dropdown-basic"
          className={className}
          style={{
            padding: "0px",
            color: "#EF6074",
            backgroundColor: "transparent",
            border: "none",
          }}
        >
          {" "}
          {title}
        </Dropdown.Toggle>

        <Dropdown.Menu
          style={{
            backgroundColor: "transparent",
            color: "#FD885A",
            borderColor: "none",
          }}
        >
          <Dropdown.Item
            href="#/action-1"
            onClick={() => langContext.setIsEnglish(false)}
          >
            {" "}
            <img src={hungarian} style={{ maxWidth: "20px" }} alt="" /> Hun
          </Dropdown.Item>
          <Dropdown.Item
            href="#/action-1"
            onClick={() => langContext.setIsEnglish(true)}
          >
            {" "}
            <img src={english} style={{ maxWidth: "20px" }} alt="" /> Eng
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}
