"use client";

/** 사이드바 맨 아래 계정 카드. 누구로 들어와 있는지, 남은 크레딧, 나가는 길 */

import { useRouter } from "next/navigation";
import { signOut, useMe } from "@/lib/auth";

export default function AccountBadge() {
  const router = useRouter();
  const { me } = useMe();

  if (me === null) return null;

  if (me === false) {
    return (
      <div className="account-card">
        <button type="button" className="account-link" onClick={() => router.push("/login")}>
          로그인
        </button>
      </div>
    );
  }

  return (
    <div className="account-card">
      {me.picture ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img className="account-photo" src={me.picture} alt="" referrerPolicy="no-referrer" />
      ) : (
        <span className="account-photo account-photo--blank">
          {(me.name || me.email).slice(0, 1)}
        </span>
      )}
      <div className="account-body">
        <p className="account-name" title={me.email}>{me.name || me.email}</p>
        <p className="account-credit">보유 크레딧: {me.jobs_left}</p>
      </div>
      {/* 화면 여기저기 남의 계정 데이터가 남아 있어 통째로 새로 받는다 */}
      <button type="button" className="account-link"
        onClick={() => { signOut().finally(() => { window.location.href = "/"; }); }}>
        로그아웃
      </button>
    </div>
  );
}