// @design-system: domain/cart/CartNavButton
// Registered at /design-system#cartnavbutton-domain

'use client';

/**
 * CartNavButton — connects CartIconButton to useCart count and opens the global CartDrawer.
 *
 * When drawer is open, renders an X close button at the same position so the user
 * can open/close without moving the mouse.
 *
 * Usage:
 * ```tsx
 * <CartNavButton />
 * ```
 */

import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';
import { useAnonCart } from '@/features/cart/anonCartStore';
import { useCartDrawerStore } from '@/features/cart/cartDrawerStore';
import { CartIconButton } from '../CartIconButton/CartIconButton';

export interface CartNavButtonProps {
  className?: string;
}

export function CartNavButton({ className }: CartNavButtonProps) {
  const items = useAnonCart((s) => s.items);
  const count = items.reduce((sum, i) => sum + i.qty, 0);
  const toggle = useCartDrawerStore((s) => s.toggle);
  const open = useCartDrawerStore((s) => s.open);
  const tCommon = useT('common');

  if (open) {
    return (
      <button
        type="button"
        aria-label={tCommon('close')}
        onClick={toggle}
        className={cn(
          'relative inline-flex items-center justify-center',
          'h-10 w-10 rounded-md',
          'text-text-secondary',
          'hover:bg-surface-hover hover:text-text-primary',
          'focus-visible:ring-brand-primary-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
          'duration-fast transition-colors',
          className,
        )}
      >
        <Icon name="X" size="md" aria-hidden />
      </button>
    );
  }

  return <CartIconButton count={count} onClick={toggle} className={className} />;
}