'use client';

/**
 * Auth-aware account control for the site header.
 *
 * The header itself is a server component fed by merchant-configured Content,
 * so it can't read client auth state. This small client island bridges that:
 * it links to `/account` when the visitor is signed in (the account page shows
 * profile + orders + sign-out) and to `/login` otherwise.
 *
 * The label/icon are i18n-driven via the `nav` namespace (`login` / `account`)
 * so RTL + translated stores stay consistent. Text is hidden on mobile to match
 * the cart icon's icon-only treatment; the icon + aria-label keep it accessible.
 */
import * as React from 'react';
import { User } from 'lucide-react';
import { Link } from '@/core/lib/navigation';
import { useAuth } from '@/core/providers/store-provider';
import { useTranslations } from '@/core/lib/translations';

export function HeaderAccount() {
  const { isLoggedIn } = useAuth();
  const t = useTranslations('nav');

  // Guests land on /login; signed-in visitors go to /account (which itself
  // bounces guests back to /login, so the link is safe even mid auth-resolve).
  const href = isLoggedIn ? '/account' : '/login';
  const label = isLoggedIn ? t('account') : t('login');

  return (
    <Link
      href={href}
      aria-label={label}
      className="text-foreground/80 hover:text-foreground hover:bg-muted/60 inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-2 transition-colors"
    >
      <User className="h-5 w-5" aria-hidden="true" />
      <span className="hidden text-sm font-medium sm:inline">{label}</span>
    </Link>
  );
}