import type { WidgetTranslations } from '../i18n';

interface ModalToolbarProps {
  /** Try-ons the shopper has left, already worded. Null when unknown. */
  quotaLabel?: string | null;
  galleryCount: number;
  onOpenGallery: () => void;
  t: WidgetTranslations['gallery'];
}

/**
 * The one row above every screen of the modal: how many try-ons are left, and
 * the way back into the ones already made. Both answers the shopper otherwise
 * only gets by hitting a wall.
 */
export function ModalToolbar({ quotaLabel, galleryCount, onOpenGallery, t }: ModalToolbarProps) {
  if (!quotaLabel && galleryCount === 0) return null;

  return (
    <div className="aisthetix-modal-toolbar">
      {quotaLabel ? (
        <span className="aisthetix-quota-counter">{quotaLabel}</span>
      ) : (
        <span />
      )}

      {galleryCount > 0 && (
        <button
          type="button"
          onClick={onOpenGallery}
          className="aisthetix-gallery-open"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
            <circle cx="8.5" cy="8.5" r="1.5" />
            <polyline points="21 15 16 10 5 21" />
          </svg>
          {t.openWithCount(galleryCount)}
        </button>
      )}
    </div>
  );
}