export default function DeckModeIndicator({ current, target, game }) {
  const progress = target > 0 ? Math.min(current / target, 1) : 0;
  const isComplete = current >= target;

  return (
    <div className="mt-2 px-1">
      {/* Progress track */}
      <div
        className="w-full rounded-full overflow-hidden"
        style={{
          height: 6,
          backgroundColor: 'var(--bg-tertiary)',
        }}
        role="progressbar"
        aria-valuenow={current}
        aria-valuemin={0}
        aria-valuemax={target}
        aria-label={`Deck progress: ${current} of ${target} cards`}
      >
        <div
          className="h-full rounded-full transition-all duration-300 ease-out"
          style={{
            width: `${progress * 100}%`,
            backgroundColor: isComplete
              ? 'var(--accent-gold)'
              : 'var(--accent-ember)',
          }}
        />
      </div>

      {/* Labels */}
      <div className="flex items-center justify-between mt-1.5">
        <span
          className="text-xs font-medium"
          style={{
            color: isComplete ? 'var(--accent-gold)' : 'var(--text-secondary)',
            textShadow: isComplete ? '0 0 8px var(--accent-gold)' : 'none',
          }}
        >
          {isComplete ? 'Deck complete!' : `${current}/${target} cards`}
        </span>
        <span
          className="text-xs"
          style={{ color: 'var(--text-secondary)' }}
        >
          {game}
        </span>
      </div>
    </div>
  );
}