import { Title, AppShell, Flex } from "@mantine/core";
import { useLingui } from "@lingui/react";
import { HeaderConfig } from "../types/header-config";
import BackButton from "./back-button";

const Header = ({ collapsed, title, titleValues, withBackButton }: HeaderConfig) => {
  const { i18n } = useLingui();
  const resolvedTitle =
    typeof title === "string" || title === undefined
      ? title
      : i18n._({ ...title, values: titleValues });

  return (
    <AppShell.Header
      id='app-header'
      display={collapsed ? 'none' : 'flex'}
      style={{
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      { withBackButton && <BackButton /> }
      <Flex justify='center' px='md' mt={8}>
        <Title order={1} lts='0.08em' style={{ userSelect: 'none' }}>
          {resolvedTitle?.toLocaleUpperCase()}
        </Title>
      </Flex>
    </AppShell.Header>
  );
}

export default Header;