'use client';

/**
 * Auth-aware account control for the site header (bare skeleton).
 *
 * 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.
 */
import * as React from '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}>
      {/* DESIGN ME — header account link; auth state via useAuth(), label via the `nav` translation namespace. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
      {label}
    </Link>
  );
}