import Button from "@/components/ui/Button";
import { withTitle } from "@/constructors/Component";
import { UrlsTitle } from "@/enums/urls";
import { useAppContext } from "@/providers/AuthProvider";
import { FunctionComponent } from "preact";
import { useLocation } from "preact-iso";
import classes from "./profile_settings.module.scss";

const ProfileSettings: FunctionComponent = () => {
  const { isLoggedIn } = useAppContext();
  const { route } = useLocation();
  return (
    <div class={classes.container}>
      <div id={classes.avatar}>Аватар</div>
      <div class={classes.profile_container}>
        <div class={classes.header_block__name}>
          <p class="text-5xl font-semibold">Никнейм</p>
          <p class="text-2xl font-light">Статус</p>
        </div>

        <div class={classes.settings_block}>
          <div class={classes.settings_block__buttons}>
            <Button>Сменить тему</Button>
            <Button>Настройки</Button>
            <Button
              color="secondary"
              onClick={() => {
                isLoggedIn.value = false;
                localStorage.setItem("loggedIn", "false");
                route("/login", true);
              }}
            >
              Выйти
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default withTitle(UrlsTitle.PROFILE, ProfileSettings);