import "./Header.css";
import "styles/styles.css";

import logo from "./logoIcon.svg";
import ru from 'images/icons/RU.svg'
import en from 'images/icons/EN.svg'


import React, { CSSProperties, useState } from "react";
import { useLocation } from "react-router-dom";

import { useAppSelector, useAppDispatch } from "hooks/redux";
import { languageSlice } from "store/reducers/languageSlice";

export type THeader = {
  language: string;
  changeLanguage: (language: string) => void;
};

export const Header: React.FC = ({ }) => {
  const buttons = [{
    icon: ru, value: "ru"
  }, { icon: en, value: "en" }]
  const location = useLocation();

  const { handleChangeLanguage } = languageSlice.actions;
  const { currentLang } = useAppSelector((state) => state.languageReducer);
  const dispatch = useAppDispatch();


  return (
    <header className={location.pathname === '/' ? 'header' : 'header header-popup'}>
      <a className="header-logo" target='_blank' href="https://estate.graff.tech/" style={{ cursor: "pointer" }}><img alt="company-logo" src={logo} />
      </a>
      <div className="header-button-container">
        {buttons.map((item, index) => (<button key={index} onClick={() => dispatch(handleChangeLanguage(item.value))} value={item.value} className={currentLang === item.value ? 'button-lang button-lang-active' : "button-lang"}><img src={item.icon}></img></button>
        ))}
      </div>
    </header>
  );
};
