"use client";

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

export function NavAuthButton() {
  const [isAuth, setIsAuth] = useState<boolean | null>(null);

  useEffect(() => {
    fetch("/api/auth/profile")
      .then(r => setIsAuth(r.ok))
      .catch(() => setIsAuth(false));
  }, []);

  if (isAuth === true) {
    return (
      <Link
        href="/home"
        className="inline-flex items-center gap-1.5 bg-rose-500 text-white text-sm font-semibold px-4 py-2 rounded-full hover:bg-rose-600 active:scale-95 transition-all duration-150 shadow-sm hover:shadow-md"
      >
        Open Tia →
      </Link>
    );
  }

  return (
    <Link
      href="/login"
      className="inline-flex items-center bg-rose-500 text-white text-sm font-semibold px-4 py-2 rounded-full hover:bg-rose-600 active:scale-95 transition-all duration-150 shadow-sm hover:shadow-md"
    >
      Join early access
    </Link>
  );
}
