import React, { useEffect, useState } from "react";
import { Button } from '@SharePoint/rencredit_uikit';

export default function Header(){
  const[appName, setAppName] = useState<string>('');
  useEffect( () => {
    setAppName(document.getElementById('page__header-block')?.dataset.app_name || '');
  }, [])

  return (
    <div className="header-block__header-container">
      <div className="header-container__block">
        <div>
          <Button 
            type = 'button'
            onClick = {() => document.location.href='/public/menu'}
            text = 'ЛОГОТИП ТУТ' 
            ui = 'secondaryPurple'
          />
        </div>
        <div>
          <Button 
            type = 'button'
            onClick = {() => document.location.href='/public/menu'}
            text = 'Меню' 
            ui = 'secondaryPurple'
          />
        </div>
        <div className="header-container__block__app-name">{appName}</div>
      </div>
      <div className="header-container__block">
        <div>
          <Button 
            type = 'button'
            onClick = {() => document.location.href='/public/request_access'}
            text = 'Заказать доступ' 
            ui = 'secondaryPurple'
          />
        </div>
        <div>
          <Button 
            type = 'button'
            onClick = {() => document.location.href='/public/logout'}
            text = 'Выход' 
            ui = 'secondaryPurple'
          />
        </div> 
      </div>
    </div>
  )
}