import { Button, Popover, Tooltip } from "antd";
import { ArrowRightOutlined, LogoutOutlined } from "@ant-design/icons";
import { api } from "./api";
import { useQuery } from "@tanstack/react-query";
import { Title } from "./components/Title";
import { keycloak } from "./keycloak.js";

export function SignOut() {
  const { data } = useQuery(["profile"], async () => {
    const { data } = await api.get("/api/me/");
    return data;
  });

  return (
    <div className="absolute top-[20px] right-[20px]">
      <Popover
        content={
          <>
            <Title text={data?.username} classNameText={"lowercase"} />
            <Button type="primary" block onClick={keycloak.logout}>
              <span className="mr-1">Выйти</span>
              <ArrowRightOutlined />
            </Button>
          </>
        }
        trigger="click"
        placement={"bottomRight"}
      >
        <Tooltip title="Выйти" placement={"left"}>
          <Button icon={<LogoutOutlined />} type="primary" size="large" />
        </Tooltip>
      </Popover>
    </div>
  );
}