'use client';
import { useAuth } from "@/hooks/auth";
import { isProfileComplete as checkProfileComplete } from "@/lib/utils.client";

export default function ProfileBanner({ onDismiss }: { readonly onDismiss?: () => void }) {
  const { state } = useAuth();
  const { user } = state;
  const isProfileComplete = checkProfileComplete(user);
  if ( isProfileComplete) return null;

  return (
    <div className="fixed top-0 left-0 w-full z-[100] bg-yellow-200 text-brand-900 border-b border-brand-400 text-sm md:text-base px-4 py-3 flex items-center justify-between gap-2 shadow">
      <span></span>
      <div className="flex gap-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="w-5 h-5 md:w-6 md:h-6 text-warning-600 shrink-0"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
          />
        </svg>
        <span>
          Your profile is incomplete.{" "}
          <a
            href="/onboarding"
            className="underline font-semibold text-brand-800 hover:text-brand-900"
          >
            Complete it now →
          </a>
        </span>
      </div>
      {onDismiss && (
        <button
          type="button"
          onClick={onDismiss}
          className="ml-3 inline-flex items-center rounded px-2 py-1 text-xs md:text-sm text-brand-900 underline"
          aria-label="Dismiss profile banner"
        >
          Dismiss
        </button>
      )}
    </div>
  );
}