import React from "react";
import styled from "styled-components";
import { useTranslation } from "../i18n";
import Icon, { IconType } from "./Icon";

const ChangeLanguageButton: React.FC = (props) => {
  const { i18n } = useTranslation();
  const { language, changeLanguage } = i18n;
  return (
    <button
      {...props}
      type="button"
      onClick={() => {
        changeLanguage(language === "fi" ? "en" : "fi");
      }}
    >
      <Icon name={language === "fi" ? IconType.GBFlag : IconType.FinlandFlag} />
    </button>
  );
};

export default styled(ChangeLanguageButton)`
  font-size: 4rem;
  background: none;
  border: none;
  width: fit-content;
`;