import React from 'react';
import { MiragenFlowButton } from '@miragenflow/ui';
import { SettingIcon } from 'components/LineIcons';
import { useAppDispatch } from 'modules/store';
import { toggleSetting } from 'modules/global';

import Style from './index.module.less';

export default function Header() {
  const dispatch = useAppDispatch();

  const toggleSettingPanel = () => {
    dispatch(toggleSetting());
  };

  return (
    <header className={Style.loginHeader}>
      <div className={Style.logo}><strong>元境幻生</strong><small>MiragenFlow 管理台</small></div>
      <div className={Style.operationsContainer}>
        <MiragenFlowButton
          aria-label='页面设置'
          className={Style.operationsButton}
          shape='square'
          type='text'
          onClick={toggleSettingPanel}
        >
          <SettingIcon className={Style.icon} />
        </MiragenFlowButton>
      </div>
    </header>
  );
}