import React from 'react';
import { Link } from 'react-router-dom';

import { useTranslation } from 'react-i18next';
import { useGetSessionQuery } from './services/session';
import { useSelector } from './store';

export type HeaderProps = {
  title?: string;
};

export const Header: React.FC<HeaderProps> = ({title}) => {
  const { t } = useTranslation();
  const { data } = useGetSessionQuery(undefined);
  const { isMobile } = useSelector(state => state.screen);

  return (
    <header className="navbar hstack shadow-2 bg-panel rounded _header">
      <h1 className="navbar-title text-primary mb-0 text-100">
        {<Link to="/">{t('title')}</Link>}
        {title && <> / {title}</>}
      </h1>
      {data && (
        <button className="btn flat ml-auto primary">
          <i className="fas fa-circle-user"></i>
          {!isMobile && <span className="ml-1">{data.username}<span className="text-dimmed">@{data.host}</span></span>}
        </button>
      )}
    </header>
  );
};
