// apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx
"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

export default function LoginStatus() {
  const router = useRouter();
  const [userName, setUserName] = useState<string | null>(null);

  useEffect(() => {
    // 예시: 로그인 시 저장한 값
    const name = localStorage.getItem("userName");
    setUserName(name);
  }, []);

  const handleLogout = () => {
    localStorage.removeItem("accessToken");
    localStorage.removeItem("userName");
    router.refresh(); // 헤더 상태 갱신
  };

  // 🔹 로그인 전
  if (!userName) {
    return (
      <Link
        href="/reuse/login"
        className="flex items-center gap-2 rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white hover:bg-sky-600"
      >
        로그인
        <span>→</span>
      </Link>
    );
  }

  // 🔹 로그인 후
  return (
    <div className="flex items-center gap-3 text-sm">
      <span className="text-gray-700">
        <strong>{userName}</strong>님 환영합니다.
      </span>
      <button
        onClick={handleLogout}
        className="rounded-md bg-red-500 px-3 py-2 text-white hover:bg-red-600"
      >
        로그아웃
      </button>
    </div>
  );
}