import { Avatar, Text, Container, Flex, UnstyledButton } from "@mantine/core";
import React from "react";
import { useUserContext } from "./UserContext";
import { Outlet, useNavigate } from "react-router";

export const Header: React.FC = () => {
  const { username, telegram_photo_url } = useUserContext();
  const navigate = useNavigate();

  const handleClick = React.useCallback(() => {
    navigate("/profile");
  }, []);

  return (
    <Container p="sm">
      <Flex justify="flex-end">
        <UnstyledButton onClick={handleClick}>
          <Flex align="center" gap="sm">
            <Text c="blue">{username}</Text>
            <Avatar src={telegram_photo_url} />
          </Flex>
        </UnstyledButton>
      </Flex>
      <Outlet />
    </Container>
  );
};