'use client';

import { apiFetch } from '@/lib/api';
import Link from 'next/link';
import { useEffect, useState } from 'react';

/**
 * Marketing-header CTAs that reflect the session: a logged-in visitor sees a
 * "Dashboard" link instead of the sign-in buttons. The session cookie is
 * httpOnly, so login state is probed via /v1/auth/me.
 */
export function MarketingAuthButtons() {
  const [authed, setAuthed] = useState<boolean | null>(null);

  useEffect(() => {
    apiFetch('/v1/auth/me')
      .then(() => setAuthed(true))
      .catch(() => setAuthed(false));
  }, []);

  if (authed) {
    return (
      <Link
        href="/dashboard"
        className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
      >
        Dashboard
      </Link>
    );
  }

  // Logged out — or still resolving — show the default sign-in CTAs.
  return (
    <>
      <Link
        href="/login"
        className="hidden rounded-md px-3 py-1.5 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg] sm:block"
      >
        Sign in
      </Link>
      <Link
        href="/login"
        className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
      >
        Start building
      </Link>
    </>
  );
}