'use client';

import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { Icon } from '@/components/ui/icons/Icon';

export interface QuantitySelectorProps {
  quantity: number;
  maxAvail: number;
  onChange: (qty: number) => void;
}

export function QuantitySelector({ quantity, maxAvail, onChange }: QuantitySelectorProps) {
  const t = useT('checkout_modal');
  const atMax = quantity >= maxAvail;
  const atMin = quantity <= 1;

  if (maxAvail <= 1) return null;

  return (
    <div className="flex items-center gap-3">
      <span className="text-text-secondary text-sm">{t('qty_label')}</span>
      <div className="flex items-center gap-2" dir="ltr">
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => onChange(quantity - 1)}
          disabled={atMin}
          aria-label={t('qty_decrease')}
          className="size-8 p-0"
        >
          <Icon name="Minus" size="sm" aria-hidden />
        </Button>
        <span className="w-6 text-center tabular-nums" aria-live="polite">
          {quantity}
        </span>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => onChange(quantity + 1)}
          disabled={atMax}
          aria-label={t('qty_increase')}
          className="size-8 p-0"
        >
          <Icon name="Plus" size="sm" aria-hidden />
        </Button>
      </div>
      {atMax && (
        <span className="text-text-secondary text-xs" role="status">
          {t('qty_at_max')}
        </span>
      )}
    </div>
  );
}