"use client";

import { useState } from "react";
import {useRouter} from "next/navigation";
import { LogOut } from "lucide-react";
import useUserStore from "@/store/user";

/**
 * 退出入口的展示参数。
 */
interface SignOutLinkProps {
  /** 顶部展示的当前账号邮箱。 */
  email?: string;
}

/** onboarding 顶部的退出入口，当前只保留 UI 和点击状态，不接真实退出接口。 */
export function SignOutLink({ email = "you@brand.com" }: SignOutLinkProps) {
  const [busy, setBusy] = useState(false);
    const router = useRouter();
    const userStore = useUserStore();

  /** 退出点击占位，后续接入真实认证时在这里调用退出接口。 */
  function handleSignOut() {
    setBusy(true);
      userStore.logout();
      router.replace("/login");
  }

  return (
    <div className="flex items-center gap-2 text-xs text-muted-foreground">
      <span className="hidden sm:inline">{email}</span>
        <button
            type="button"
        onClick={handleSignOut}
        className="inline-flex items-center gap-1 rounded-md px-2 py-1 transition-colors hover:bg-muted hover:text-foreground"
      >
        <LogOut className="h-3 w-3" aria-hidden="true" />
        {busy ? "Signing out..." : "Sign out"}
        </button>
    </div>
  );
}